Não sei se alguém passou pelo mesmo problema, mas verificando meu código a classe da minha <tr>
está ficando assim
<tr class="paciente paciente-invalido" id="segundo-paciente">
<td class="info-nome">João</td>
<td class="info-peso">80</td>
<td class="info-altura">5.72</td>
<td class="info-gordura">40</td>
<td class="info-imc">Altura Inválida</td>
</tr>
O background não está sendo aplicado, alguém saberia me dizer o motivo?
Segue abaixo o meu Js e CSS
var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista";
var pacientes = document.querySelectorAll(".paciente");
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 pesoEhValido = true;
var alturaEhValida = true;
if(peso < 0 || peso > 1000){
console.log("Peso inválido!");
tdImc.textContent = "Peso inválido";
pesoEhValido = false;
paciente.classList.add("paciente-invalido");
}
if(altura < 0 || altura > 3.00){
console.log("Altura inválida!");
tdImc.textContent = "Altura Inválida";
alturaEhValida = false;
paciente.classList.add("paciente-invalido");
}
if(alturaEhValida && pesoEhValido){
var imc = peso / (altura * altura);
tdImc.textContent = imc.toFixed(2);
}
}
.paciente-invalido{
background-color: lightcoral;
}