1
resposta

classList.add não está funcionando

Faço exatamente como explicado, sendo que não aparece no navegador a cor quando a altura ou o peso está inválido. Eu realmente não sei o que pode estar acontecendo.

for (var i = 0; i < pacientes.length; i++) {

    var paciente = pacientes[i]

    var tdPeso = paciente.querySelector(".info-peso"); 

var peso = tdPeso.textContent;

var tdAltura = paciente.querySelector(".info-altura");
var altura = tdAltura.textContent; 

var tdImc = paciente.querySelector(".info-imc"); 

var pesovalido = true;
var alturavalida = true;

if (peso <= 0 || peso >= 1000) {
    console.log("Peso inválido");
    pesovalido = false;
    tdImc.textContent = "Peso inválido!";
    paciente.classList.add("paciente-invalido");
}

if (altura <= 0 || altura >= 3.00) {
    console.log("Altura inválida");
    alturavalida = false;
    tdImc.textContent = "Altura inválida!";
    paciente.classList.add("paciente-invalido");
}

if (alturavalida && pesovalido){
var imc = peso / (altura * altura); 
tdImc.textContent = imc.toFixed(2); 
}

}
1 resposta

Oi Guilherme, tudo bem?

A sintaxe parece correta! Posta seu código todo num Jsbin por favor? Aí já dá pra ver o resultado esperado ali.

Uma coisa que eu faço: vou debugando usando console.log(X), sendo X o nome da variavel que quero testar pra ver se ela tá chegando certo.

Dá uma conferida na chamada dos arquivos CSS também.

Uma alternativa não muito ortodoxa é trocar a adição de classe e adicionar o CSS na mão via JS, Ficaria assim:

De:

    paciente.classList.add("paciente-invalido");

Para:

    paciente.style.background = "lightcoral";

Abcs!