2
respostas

Ao enviar pelo formulário, a td acima é influenciada.

Oi, gente.

Decidi criar uma função para dar cor ao IMC de acordo com o grau de risco. Até aí, tudo bem. Porém, percebi que quando eu adiciono um novo paciente pelo formulário, a paciente Tatiana, que é a última da lista existente no HTML tem a sua classe de estilo alterada.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Deixei o trecho da função:

function classificaImc(valorImc, variavel){
   if(valorImc < 18.5){
        return variavel.setAttribute('class','imc-abaixo')
    }
    else if (valorImc >= 18.5 && valorImc < 25.0){
        return variavel.classList.add('imc-saudavel')
    }
    else if (valorImc > 24.9 && valorImc < 29.9){
        return variavel.setAttribute('class','imc-sobrepeso')
    }
    else if (valorImc > 30.0 && valorImc < 34.9){
        return variavel.classList.add('imc-obeso1')
    }
    else if (valorImc > 35.0 && valorImc < 39.9){
        return variavel.setAttribute('class','imc-obeso2')
    }
    else if (valorImc > 40.0){
        return variavel.setAttribute('class','imc-obeso3')
    }

Vou deixar o arquivo nos comentarios abaixo.

Muito obrigado, gente!

2 respostas
var botao = document.querySelector("#adicionar-paciente")

botao.addEventListener("click", (event)=>{
    event.preventDefault();

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

    var erros = validaPaciente(paciente)
    console.log(erros)
    if(erros.length > 0){
        exibeMensagemDeErro(erros)
        return
    }

    adicionaPacienteNaTabela(paciente)

    form.reset()
    mensagensErro = document.querySelector("#mensagens-erro")
    mensagensErro.innerHTML = ""

})

function adicionaPacienteNaTabela(paciente){
    var pacienteTr = montaTr(paciente)
    var tabela = document.querySelector("#tabela-pacientes")
    tabela.appendChild(pacienteTr)

}


function exibeMensagemDeErro(erros){
    var ul = document.querySelector("#mensagens-erro")
    ul.innerHTML = ""
    erros.forEach((erro) => {
        var li = document.createElement("li")
        li.textContent = erro
        ul.appendChild(li)

    });
}

function obtemPacienteDoFormulario(form){

    var paciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value,
        imc: calculaImc(form.peso.value,form.altura.value)
    }
    return paciente
}



function montaTr(paciente) {
    var pacienteTr = document.createElement("tr")
    pacienteTr.classList.add("paciente")

    var nomeTd = document.createElement("td")
    nomeTd.textContent = paciente.nome
    nomeTd.classList.add("info-nome")

    var pesoTd = montaTd(paciente.peso,"info-peso")
    var alturaTd = montaTd(paciente.altura,"info-altura")
    var gorduraTd = montaTd(paciente.gordura,"info-gordura")
    var imcTd = montaTd(paciente.imc,"info-imc")
    classificaImc(imcTd.textContent,imcTd)

    pacienteTr.appendChild(nomeTd)
    pacienteTr.appendChild(pesoTd)
    pacienteTr.appendChild(alturaTd)
    pacienteTr.appendChild(gorduraTd)
    pacienteTr.appendChild(imcTd)

    return pacienteTr
}

function montaTd(dado,classe){
    var td = document.createElement("td")
    td.textContent = dado
    td.classList.add(classe)

    return td
}

function validaPaciente(paciente){

    var erros = []

    if(paciente.nome.length ==0){
        erros.push("É necessário preencher o nome.")
    }

    if(!validaPeso(paciente.peso)) erros.push("O peso é inválido. ")


    if(!validaAltura(paciente.altura)) erros.push("A altura é inválida. ")

    if(paciente.gordura.length ==0){
        erros.push("É necessário preencher o índice de gordura.")
    }

    if(paciente.peso.length ==0){
        erros.push("É necessário preencher o peso.")
    }

    if(paciente.altura.length ==0){
        erros.push("É necessário preencher a altura.")
    }
    return erros
}

Olá, Luiz, tudo bem?

Testei o seu código aqui e ele parece ok! Então o que pensei para o seu problema foi o seguinte: por algum motivo a Tatiana deve estar recebendo a classe imc-obeso3 em algum momento do seu código. Você poderia confirmar isso inspecionando o HTML da página depois de adicionar um novo paciente?

Se isso realmente está acontecendo, é possível que você esteja chamando a função classificaImc em algum outro momento do programa, mas com variavel sendo o td da Tatiana (mas recebendo o Imc do novo paciente! Já que o Imc dela não corresponde à cor roxa). Você também pode verificar em quais outros códigos você está chamando a função classificaImc, e se possível mostrar aqui também.

Fico no aguardo! :)

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