Olá pessoal, utilizando o classList.add(), tentei selecionar o campo de cálculo do imc a fim de editar também ele no CSS. Porém ao tentar executar o código abaixo, fui informado de que: "Cannot read property 'add' of undefined". Podem ajudar?
JS
var tituloPagina = document.querySelector(".titulo");
tituloPagina.textContent = "Aparecida Nutricionista";
var pacientes = document.querySelectorAll(".paciente");
for(i = 0; i < pacientes.length; i++) {
var paciente = pacientes[i];
// Captando informações por paciente
var tdPeso = paciente.querySelector(".info-peso");
var peso = tdPeso.textContent;
var tdAltura = paciente.querySelector(".info-altura");
var altura = tdAltura.textContent;
var imcPaciente = paciente.querySelector(".info-imc");
// Validando o IMC
pesoEhValido = true;
alturaEhValida = true;
if(peso <= 0 || peso >= 1000) {
tdPeso.textContent = "Peso inválido!";
pesoEhValido = false;
paciente.style.color = "red";
paciente.style.fontWeight = "bold";
pacientes.classList.add("paciente-erro")
}
if(altura <= 0 || altura >= 3) {
tdAltura.textContent = "Altura Inválida!";
alturaEhValida = false;
pacientes.classList.add("paciente-erro")
}
if(alturaEhValida && pesoEhValido) {
var imc = peso / (altura * altura);
imcPaciente.textContent = imc.toFixed(2);
imcPaciente.classList.add("imc-calculado");
}
}
CSS:
.paciente-erro {
color: red;
font-weight: bold;
background: lightcoral;
}
.imc-calculado {
color: green;
font-weight: bold;
background: lightgreen;
}