Olá, gente, boa tarde! Resolvi pôr em prática o que aprendi até a aula 5, vídeo 3 e criei uma nova coluna. Essa coluna se chama resultado. Ela verifica o valor do IMC gerado pela função calculaImc(peso, altura) e diz em que situação a pessoa está de acordo com o seu peso. Minha questão é a seguinte: Quando eu insiro um novo paciente no formulário, minha última coluna(que é a nova, Resultado) da última linha(Paciente Tatiana) atualiza junto com o Resultado do novo paciente. E eu não sei o que fazer xD. Help? Segue meu código:
HTML:
<tr class="paciente" id="primeiro-paciente">
td class="info-nome" >Paulo</td>
<td class="info-peso">100</td>
<td class="info-altura">25.00</td>
<td class="info-gordura">10</td>
<td class="info-imc">0</td>
<td class="info-resultado"></td> //Nova Coluna adicionada
</tr>
JavaScript: calcula-Imc.js
var pacientes = document.querySelectorAll(".paciente");
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 = paciente.querySelector(".info-imc");
var resultado = paciente.querySelector(".info-resultado");
var pesoEhValido = true;
var alturaEhValida = true;
if( peso <= 0|| peso >=1000 ){
pesoEhValido = false;
imc.textContent = "Peso inválido!";
resultado.textContent = "Resultado incalculável";
paciente.classList.add("paciente-invalido");
}
if (altura <=0 || altura >= 3){
alturaEhValida = false;
imc.textContent = "Altura inválida!"
resultado.textContent = "Resultado incalculável";
paciente.classList.add("paciente-invalido");
}
if(pesoEhValido && alturaEhValida){
var totalImc = calculaImc(peso, altura);
imc.textContent = totalImc;
resultado.textContent = valorResultado(totalImc);
}
}
function calculaImc(peso, altura){
var imc = peso / (altura * altura);
return imc.toFixed(2);
}
//Função que gera o resposta de acordo com o resultado do IMC
function valorResultado(totalImc){
if (totalImc <= 18.5){
resultado.textContent = "Abaixo do Peso";
}else if(totalImc > 18.5 && totalImc < 25){
resultado.textContent = "Peso ideal";
}else if(totalImc >= 25 && totalImc < 30){
resultado.textContent = "Levemente acima do peso";
}else if(totalImc >=30 && totalImc < 35){
resultado.textContent = "Obesidade grau I";
}else if(totalImc >= 35 && totalImc <40){
resultado.textContent = "Obesidade grau II(severa)";
}else{
resultado.textContent = "Obesidade grau III(mórbida)";
}
return resultado.textContent;
}
form.js
var botaoAdicionar = document.querySelector(".botao");
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");
pacienteTr.classList.add("paciente");
var nomeTd = document.createElement("td");
nomeTd.classList.add("info-nome");
var pesoTd = document.createElement("td");
pesoTd.classList.add("info-peso");
var alturaTd = document.createElement("td");
alturaTd.classList.add("info-altura");
var gorduraTd = document.createElement("td");
gorduraTd.classList.add("info-gordura");
var imcTd = document.createElement("td");
imcTd.classList.add("info-imc");
var resultadoTd = document.createElement("td");
resultadoTd.classList.add("info-resultado");
nomeTd.textContent = nome;
pesoTd.textContent = peso;
alturaTd.textContent = altura;
gorduraTd.textContent = gordura;
total = calculaImc(peso,altura); //Calcula o IMC
imcTd.textContent = total;
resultadoTd.textContent = valorResultado(total); // Esta linha muda a última coluna, da última linha populada(Paciente Tatiana) no index.html.
pacienteTr.appendChild(nomeTd);
pacienteTr.appendChild(pesoTd);
pacienteTr.appendChild(alturaTd);
pacienteTr.appendChild(gorduraTd);
pacienteTr.appendChild(imcTd);
pacienteTr.appendChild(resultadoTd);
var tabela = document.querySelector("#tabela-pacientes");
tabela.appendChild(pacienteTr);
});
Sou grato, de coração! Rafael Barbosa.