1
resposta

Alteração das Cores - Informações Inválidas

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); 
  }
}
1 resposta

Fala ai Marcos, tudo bem? O problema está na definição da cor de fundo, nesse trecho aqui:

color: "red";
backgroundColor: "lightgreen";

Repare que está usando uma sintaxe parecida ou igual ao do JavaScript, mas, no CSS deveria ser assim:

color: red;
background-color: lightgreen;

Isso porque os valores das cores não precisam ser definidos em aspas duplas e as palavras são separadas utilizando o padrão kebab-case, diferente do JavaScript que usa o camelCase.

Espero ter ajudado.