Durante a aula do professor, foi explicada a alteração na formatação da linha da tabela, quando ocorresse um erro, tanto para Peso quanto para Altura. O primeiro método foi feito dentro do JavaScript e tudo funcionou para as duas variáveis (Peso e Altura). Quando o professor explicou que a alteração na formatação da linha da tabela, quando ocorresse um erro, poderia ser mais otimizada, se fosse usado o CSS. Pois bem, deixei o erro no Peso para avaliação via CSS, e o erro na Altura para avaliação no JavaScript. O erro de Altura fica visível com a formatação, mas o erro de Peso não fica com a formatação igual, quando uso CSS. Gostaria de saber o que eu errei quando a formatação seguiu o caminho do CSS. Abaixo apresento o CSS com a parte correspondente e o JavaScript;
.paciente-invalido{
color: "red";
backgroundColor: "lightgreen";
font-weight: bold;
}
var titulo = document.querySelector(".titulo1");
titulo.textContent = "Aparecida Nutricionista CRN/SP = 6754390"
var pacientes = document.querySelectorAll(".paciente");
for (var i = 0; i < pacientes.length; i++) {
var paciente = pacientes[i];
var tdPeso = paciente.querySelector(".info-peso");
console.log(tdPeso);
var peso = tdPeso.textContent;
console.log(peso);
var tdAltura = paciente.querySelector(".info-altura");
console.log(tdAltura);
var altura = tdAltura.textContent;
console.log(altura);
var tdImc = paciente.querySelector(".info-imc")
var pesoEhValido = true;
var alturaEhValida = true;
if (peso < 0 || peso > 300) {
console.log("Peso inválido!");
pesoEhValido = false;
tdImc.textContent = "Peso inválido!";
paciente.classList.add("paciente-invalido");
}
if (altura < 0 || altura > 3.00) {
console.log("Altura inválida!");
alturaEhValida = false;
tdImc.textContent = "Altura inválida!";
paciente.style.color = "red";//Método 2 de formatar a linha de erro.
paciente.style.backgroundColor ="lightgreen"//Método 2 de formatar a linha de erro.
paciente.style.weight = "bold";//Método 2 de formatar a linha de erro.
}
if (pesoEhValido && alturaEhValida){
var imc=peso/(altura*altura);
console.log(imc);
tdImc.textContent = imc.toFixed(2);
}
}