1
resposta

Não aparece a mensagem de "peso inválido" e continua calculando imc negativo

calcula-imc.js

var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista";


var pacientes = document.querySelectorAll(".paciente");

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 tdImc = paciente.querySelector(".info-imc");

    var pesoEhValido = validaPeso(peso); //true ou false
    var alturaEhValida = validaAltura(altura);

    if (!pesoEhValido) { // ! invente os valores
        console.log("Peso inválido!");
        pesoEhValido = false;
        tdImc.textContent = "Peso inválido";
        paciente.classList.add("paciente-invalido")
    }

    if (!alturaEhValida) {
        console.log("Altura inválida!");
        alturaEhValida = false;
        tdImc.textContent = "Altura inválida";
        paciente.classList.add("paciente-invalido")
    }

  if (alturaEhValida && pesoEhValido) {
        var imc = calculaImc(peso,altura);
        tdImc.textContent = imc;
    }
}

function validaPeso(peso){
    if(peso >= 0 && peso < 1000){
        return true;
    }else{
        return false;
    }
}

function validaAltura(altura){
    if(altura >=0 && altura <= 3.0){
        return true;
    }else{
        return false;
    }
}


function calculaImc(peso,altura){
    var imc = 0;
    imc = peso / (altura * altura);
    return imc.toFixed(2);
}

form.js

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

    var form = document.querySelector("#form-adiciona");
    // Extrando informações do paciente do form
    var paciente = obtemPacienteDoForm(form);

    // Cria a tr e a td do paciente

    var pacienteTr = montaTr(paciente);

    var erro = validaPaciente(paciente);


    if(erro.length > 0){
        var mensagemErro = document.querySelector("#mensagem-erro");
        mensagemErro.textContent = erro;
        return;
    }

    // Adicionando o paciente na tabela
    var tabela = document.querySelector("#tabela-pacientes");
    tabela.appendChild(pacienteTr);

    form.reset();

})


function obtemPacienteDoForm(form){
    var paciente = {
        nome: form.nome.value,
        peso: form.altura.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");

    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));

    return pacienteTr;
}


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

    return td;
}

function validaPaciente(paciente){
    if(validaPeso(paciente.peso)){
        return "";
    }else{
        return "Peso inválido";
    }
}

eu adicionei o span com o id="mensagem-erro", porem continua calculando o imc negativo, o que fiz de errado? segui todos os passos

1 resposta

Olá Paulo, tudo bem com você?

Peço desculpas pela demora em lhe responder.

A mensagem de erro não está sendo apresentada devido ao atributo peso do objeto paciente está recebendo o valor informado no campo altura do formulário. Foi declarado da seguinte forma: peso: form.altura.value, deveria ser: peso: form.peso.value,. Assim a validação ocorre utilizando valores errados, permitindo que a função calculaImc receba um peso inválido, gerando o resultado negativo.

Para corrigir o erro de cálculo do IMC e fazer com que mensagem "Peso inválido" seja apresentada, basta seguir os passos abaixo.

  • Abra o arquivo form.js e localise a função obtemPacienteDoForm
  • Na variável paciente localize o atributo peso e declare-o como apresentado abaixo
      peso: form.peso.value,
  • Salve o arquivo form.js
  • Abra o arquivo index.html no navegador e adicione um novo paciente informando um peso negativo.
  • Verifique se a mensagem de erro é apresentada acima do formulário.

Peço que verifique os pontos listados acima, fico à disposição em caso de dúvidas.

Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!