O código está aplicando a classe "paciente-invalido", porém não na TR criada e sim na anterior, percebi que posso criar um If para resolver o erro, mas não me parece que está correto.
console.log( " oi ");
var botaoAdicionar = document.querySelector( " #adicionar-paciente " );
botaoAdicionar.addEventListener ( "click" , function ( event ) {
event.preventDefault( );
var form = document.querySelector( "#form-adiciona" ) ;
var paciente = {
formNome: form.nome.value ,
formPeso: form.peso.value ,
formAltura: form.altura.value ,
formGordura: form.gordura.value ,
formImc: calcularImc ( form.peso.value , form.altura.value )
}
// var tabela = document.querySelector( "#tabela-pacientes" );
var tabelaTr = criarElementoNoHtml( "tr" );
var nomeTd = criarElementoNoHtml( "td" );
var pesoTd = criarElementoNoHtml( "td" );
var alturaTd = criarElementoNoHtml( "td" );
var gorduraTd = criarElementoNoHtml( "td" );
var imcTd = criarElementoNoHtml( "td" );
tabelaTr.classList.add("paciente")
nomeTd.classList.add( "info-nome" )
pesoTd.classList.add( "info-peso" )
alturaTd.classList.add( "info-altura" )
gorduraTd.classList.add( "info-gordura" )
imcTd.classList.add( "info-imc" )
tabela.appendChild(tabelaTr);
tabelaTr.appendChild( nomeTd );
tabelaTr.appendChild( pesoTd );
tabelaTr.appendChild( alturaTd );
tabelaTr.appendChild( gorduraTd );
tabelaTr.appendChild( imcTd );
nomeTd.textContent = paciente.formNome ;
pesoTd.textContent = paciente.formPeso ;
alturaTd.textContent = paciente.formAltura ;
gorduraTd.textContent = paciente.formGordura ;
imcTd.textContent = paciente.formImc ;
console.log(tabela)
console.log( paciente.formNome, paciente.formPeso, paciente.formAltura, paciente.formGordura, paciente.formImc);
} )
function criarElementoNoHtml ( elemento ){
return document.createElement( elemento );
}
var tabela = document.querySelector( "#tabela-pacientes" );
var pacientes = document.querySelectorAll( ".paciente" );
for (var i = 0 ; i < pacientes.length ; i++ ) {
var paciente = pacientes[i];
var nome = paciente.querySelector( ".info-nome" ).textContent ;
var peso = paciente.querySelector( ".info-peso" ).textContent ;
var altura = paciente.querySelector( ".info-altura" ).textContent;
var gordura = paciente.querySelector( ".info-gordura" ).textContent ;
var imc = paciente.querySelector( ".info-imc" ).textContent = calcularImc ( peso, altura);
}
// valida IMC
function calcularImc ( peso, altura) {
var pesoCerto = validaPeso( peso ) ;
var pesoAltura =validaAltura( altura ) ;
if ( !pesoCerto ) {
paciente.classList.add("paciente-invalido") ;
return "Peso Inválido" ;
}
if ( !pesoAltura ) {
paciente.classList.add("paciente-invalido")
return "Altura Inválido";
}
if ( pesoCerto && pesoAltura){
return parseFloat( ( peso / ( altura * altura ) ).toFixed( 2 ) );
}
}
function validaPeso ( peso ){
var pesoCerto = "true"
if ( peso <= 0 || peso >= 230 ) {
return pesoCerto = false ;
}
return pesoCerto ;
}
function validaAltura ( altura ) {
var alturaCerto = true ;
if ( altura <= 0 || altura >= 2.30) {
return alturaCerto = false;
}
return alturaCerto ;
}
