1
resposta

Ao adicionar um paciente, muda o IMC o ultimo da tabela e não adiciona a descrição

Bom dia, eu decidi como uma boa prática, adicionar algo a mais nesta página que seria a descrição do IMC e a troca de cor da tabela, porém quando adiciono um novo paciente, o ultimo da tabela é trocado a cor como se fosse o do paciente adicionadoInsira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

principal.js

var titulo = document.querySelector(".titulo");
var pacientes = document.querySelectorAll(".paciente");
var pesoValido = true;
var alturaValida = true;

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 tdImcDesc = paciente.querySelector(".info-desc-imc");
  //var imcDesc = tdImcDesc.textContent;

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

  var pesoValido = true;
  var alturaValida = true;

  if(peso < 0 || peso >= 1000){
    tdImc.textContent = "Peso inválido";
    paciente.classList.add("paciente-invalido")
    pesoValido = false;
    tdImcDesc.textContent="IMC não calculado";
  }

  if(altura < 0 || altura > 3){
    tdImc.textContent = "Altura inválida";
    alturaValida = false;
    paciente.classList.add("paciente-invalido")
    tdImcDesc.textContent="IMC não calculado";
  }
  if (pesoValido && alturaValida){
    var imc = calculaImc(peso, altura);
    tdImc.textContent = imc;

  }

  if(pesoValido === false && alturaValida === false){
    tdImc.textContent = "Peso e altura inválidos";
    tdImcDesc.textContent="IMC não calculado";
  }
}

function calculaImc(peso, altura){
  var imc = peso / Math.pow(altura, 2);
  verificaImc(imc);
  return imc.toFixed(2);
}

function verificaImc(imc){
    if(imc < 17){
      paciente.classList.add("paciente-muito-abaixo");
      tdImcDesc.textContent = "Muito abaixo do peso";
    }else if (imc >17 && imc < 18.50){
      paciente.classList.add("paciente-abaixo");
      tdImcDesc.textContent = "Abaixo do peso";
    }else if(imc >= 18.50 && imc < 25){
      paciente.classList.add("paciente-normal");
      tdImcDesc.textContent = "Peso normal";
    }else if (imc >= 25 && imc < 30){
      tdImcDesc.textContent = "Acima do peso";
      paciente.classList.add("paciente-acima-peso");
    }else if(imc >= 30 && imc < 35){
      paciente.classList.add("paciente-obesidade-1");
      tdImcDesc.textContent = "Obesidade I";
    }else if(imc >=35 && imc < 40){
      paciente.classList.add("paciente-obesidade-2");
      tdImcDesc.textContent = "Obesidade II (Severa)";
    }else if(imc >=40){
      paciente.classList.add("paciente-obesidade-3");
      tdImcDesc.textContent = "Obesidade III (Mórbida)";
    }
  }

form.js 
var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event) {
    event.preventDefault();

    var form = document.querySelector("#form-adiciona");

    var nome = form.nome.value;
    var peso = form.peso.value;
    var altura = form.altura.value;
    var gordura = form.gordura.value;

    var pacienteTr = document.createElement("tr");

    var nomeTd = document.createElement("td");
    var pesoTd = document.createElement("td");
    var alturaTd = document.createElement("td");
    var gorduraTd = document.createElement("td");
    var imcTd = document.createElement("td");
    //var imcDescTd = document.createElement("td");

    nomeTd.textContent = nome;
    pesoTd.textContent = peso;
    alturaTd.textContent = altura;
    gorduraTd.textContent = gordura;
    imcTd.textContent = calculaImc(peso, altura);
    //imcDescTd.textContent = verificaImc(imcTd.textContent);

    pacienteTr.appendChild(nomeTd);
    pacienteTr.appendChild(pesoTd);
    pacienteTr.appendChild(alturaTd);
    pacienteTr.appendChild(gorduraTd);
    pacienteTr.appendChild(imcTd);
    //pacienteTr.appendChild(imcDescTd);

    var tabela = document.querySelector("#tabela-pacientes");

    tabela.appendChild(pacienteTr);

});
1 resposta

Olá Pedro, tudo bem com você?

Peço desculpas pela demora em lhe responder.

Será necessário realizar algumas mudanças no código para que ao adicionar um novo paciente a tabela não ocorra interferência no último paciente adicionado. No arquivo principal.js passaremos os parâmetros paciente, tdImcDesc e imc para a função verificaImc() para que as referências do nosso paciente sejam adicionadas, caso contrário, a referência será o último elemento da tabela. Já no arquivo forms.js devemos remover comentários nas linhas que realizam a manipulação da célula de descrição e realizar a chamada da função verificaImc() passando os parâmetros paciente, tdImcDesc e imc.

Deixo abaixo o código completo com as mudanças já aplicadas.

Arquivo principal.js

var titulo = document.querySelector(".titulo");
var pacientes = document.querySelectorAll(".paciente");
var pesoValido = true;
var alturaValida = true;
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 tdImcDesc = paciente.querySelector(".info-desc-imc");
  var imcDesc = tdImcDesc.textContent;
  var tdImc = paciente.querySelector(".info-imc")
  var pesoValido = true;
  var alturaValida = true;
  if(peso < 0 || peso >= 1000){
    tdImc.textContent = "Peso inválido";
    paciente.classList.add("paciente-invalido")
    pesoValido = false;
    tdImcDesc.textContent="IMC não calculado";
  }
  if(altura < 0 || altura > 3){
    tdImc.textContent = "Altura inválida";
    alturaValida = false;
    paciente.classList.add("paciente-invalido")
    tdImcDesc.textContent="IMC não calculado";
  }
  if (pesoValido && alturaValida){
    var imc = calculaImc(peso, altura);
    verificaImc(paciente, tdImcDesc, imc);
    tdImc.textContent = imc;
  }
  if(pesoValido === false && alturaValida === false){
    tdImc.textContent = "Peso e altura inválidos";
    tdImcDesc.textContent="IMC não calculado";
  }
}
function calculaImc(peso, altura){
  var imc = peso / Math.pow(altura, 2);
  return imc.toFixed(2);
}
function verificaImc(paciente, tdImcDesc, imc){
  if(imc < 17){
    paciente.classList.add("paciente-muito-abaixo");
    tdImcDesc.textContent = "Muito abaixo do peso";
  }else if (imc >17 && imc < 18.50){
    paciente.classList.add("paciente-abaixo");
    tdImcDesc.textContent = "Abaixo do peso";
  }else if(imc >= 18.50 && imc < 25){
    paciente.classList.add("paciente-normal");
    tdImcDesc.textContent = "Peso normal";
  }else if (imc >= 25 && imc < 30){
    tdImcDesc.textContent = "Acima do peso";
    paciente.classList.add("paciente-acima-peso");
  }else if(imc >= 30 && imc < 35){
    paciente.classList.add("paciente-obesidade-1");
    tdImcDesc.textContent = "Obesidade I";
  }else if(imc >=35 && imc < 40){
    paciente.classList.add("paciente-obesidade-2");
    tdImcDesc.textContent = "Obesidade II (Severa)";
  }else if(imc >=40){
    paciente.classList.add("paciente-obesidade-3");
    tdImcDesc.textContent = "Obesidade III (Mórbida)";
  }}

Arquivo form.js

var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event) {
  event.preventDefault();
  var form = document.querySelector("#form-adiciona");
  var nome = form.nome.value;
  var peso = form.peso.value;
  var altura = form.altura.value;
  var gordura = form.gordura.value;
  var pacienteTr = document.createElement("tr");
  var nomeTd = document.createElement("td");
  var pesoTd = document.createElement("td");
  var alturaTd = document.createElement("td");
  var gorduraTd = document.createElement("td");
  var imcTd = document.createElement("td");
  var imcDescTd = document.createElement("td");
  nomeTd.textContent = nome;
  pesoTd.textContent = peso;
  alturaTd.textContent = altura;
  gorduraTd.textContent = gordura;

  var imc = calculaImc(peso, altura); 
  imcTd.textContent = imc;
  verificaImc(pacienteTr, imcDescTd, imc);

  pacienteTr.appendChild(nomeTd);
  pacienteTr.appendChild(pesoTd);
  pacienteTr.appendChild(alturaTd);
  pacienteTr.appendChild(gorduraTd);
  pacienteTr.appendChild(imcTd);
  pacienteTr.appendChild(imcDescTd); 
  var tabela = document.querySelector("#tabela-pacientes");
  tabela.appendChild(pacienteTr);
});

Abaixo, um GIF com o resultado após as modificações:

GIF que apresenta o teste do código apresentado acima.

Espero ter lhe ajudado. Em caso de dúvidas estou à disposição.

Abraços e bons estudos!

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