Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Incluir nova formataçaõ CSS

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;
}
1 resposta
solução!

Ah pessoal, acho que descobri. Eu estava usando um var pacientes para usar o classList. Tenho que sempre usar o nome da classe, certo?