Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Adicionar classe a um elemento html

Boa tarde a todos! Fiz essas modificações no projeto para que na página mostrasse o significado do IMC do paciente, para isso inseri na tabela uma nova coluna chamada Status. O status é apenas a informação de qual nível o IMC está, no arquivo index.css criei 4 estilos, cada um referente ao nível o IMC. Ficou assim:

.abaixo-peso{
    background-color: lightyellow;
}

.normal{
    background-color: lightblue;
}

.acima-peso{
    background-color: #FFA500;
}

.obeso{
    background-color: lightcoral;
}

O arquivo principal.js está desse jeito:

//criando array de pacientes
var pacientes = document.querySelectorAll(".paciente");

//função que valida os valores recebidos e retorna o imc calculado ou uma mesagem de erro
function calculaImc(peso, altura){
  if(valida(peso, altura)){
    return Math.round(peso /(altura * altura));
  }else{
    return "Peso ou altura inválido";
  }
}

// valida o peso e a altura
function valida(peso, altura){
  if(peso < 0 || peso >150 || altura < 0.3 || altura > 2.5){
    return false;
  }else{
    return true;
  }
}

// função que retorna o status do paciente de acordo com o IMC
function statusPaciente(imc){
  if(imc < 18.5){
     return "Abaixo do peso!";
  }else if(imc >= 18.5 && imc < 25){
    return "Peso normal!";
  }else if(imc >= 25 && imc <30){
    return "Acima do peso!";
  }else{
    return "Obeso!";
  }
}

// loop que faz a chamada da função calculaImc e insere na TD, de todos pacientes
for(var i = 0; i < pacientes.length; i++){
  var paciente = pacientes[i];
  var peso = paciente.querySelector(".info-peso").textContent;
  var altura = paciente.querySelector(".info-altura").textContent;
  var imc = calculaImc(peso, altura);

// verifico se o imc está com inválido, caso sim mudo a cor da linha
  if(imc == "Peso ou altura inválido"){
    paciente.classList.add("paciente-invalido");
  }
//adicionando o imc calculado e o status as suas respectivas td's
  paciente.querySelector(".info-imc").textContent = imc;
  paciente.querySelector(".info-status").textContent = statusPaciente(imc);
  console.log(status);
}

O problema é que quando adiciono a classe referente ao nível do IMC, não funciona e da erro no for(fica todas as informações zeradas).

Alguma sugestão? Agradeço desde já a atenção.

2 respostas
solução!

Fala Tiago, tudo bom?

Seu código está funcionando, verifique seu HTML se você modificou as classes das tds para info-status.

A única coisa que está acontecendo ai é que você não está atribuindo ainda as classes de status para os pacientes e consequentemente ainda não temos as cores sendo alteradas.

Você pode fazer isso ao chamar o método statusPaciente, acima do return, caso seu objetivo seja colorir background inteiro do paciente, basta adicionar a linha abaixo:

ex:

 paciente.classList.add("abaixo-peso");

caso sua intenção seja colorir apenas o quadrante de status, faça:

ex:

paciente.querySelector(".info-status").classList.add("peso-normal");

Lembre-se de modificar a classe que está sendo adicionada para cada caso e não se esqueça de adicionar o parâmetro paciente para seu método, veja abaixo:

function statusPaciente(imc, paciente){}

e de passar o paciente!

statusPaciente(imc, paciente);

Boa tarde Paulo Scalercio! Muito obrigado, era exatamente isso que eu estava com problemas, colorir o quadrante exato do status, fiz assim:

function statusPaciente(imc, paciente){
  if(imc < 18.5){
    paciente.querySelector(".info-status").classList.add("abaixo-peso");
    return "Abaixo do peso!";
  }else if(imc >= 18.5 && imc < 25){
    paciente.querySelector(".info-status").classList.add("normal");
    return "Peso normal!";
  }else if(imc >= 25 && imc <30){
    paciente.querySelector(".info-status").classList.add("acima-peso");
    return "Acima do peso!";
  }else{
    paciente.querySelector(".info-status").classList.add("obeso");
    return "Obeso!";
  }
}

Agora está funcionando joinha!!!

Obrigado mais uma vez.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software