Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Erro após modificações: Uncaught TypeError: Cannot read property 'lenght' of undefined at HTMLButtonElement.<anonymous> (form.js:14) (anonymous) @ form.js:14

Eu inseri essa pergunta ontem...posto novamente pq por alguma razão não apareceu no forum...

meu código, após a aula "exibindo msg de erro" parou de funcionar e esta retornando o seguinte erro:

form.js:12 Uncaught TypeError: Cannot read property 'length' of undefined at HTMLButtonElement. (form.js:12)

não tenho nem ideia se tem limite de caracteres aqui...mas talvez tenha sido esse o problema...mas vou tentar enviar...de novo o meu código. Se alguem, por favor, puder me ajudar..=///

form.js

var btnAdicionar = document.querySelector("#adicionar-paciente");

btnAdicionar.addEventListener("click", function (event) {
    event.preventDefault();

    var form = document.querySelector("#form-add-paciente");
    var paciente = pegarDadosPaciente(form);
    var pacienteTr = montaTr(paciente);

    var erros = validaPaciente(paciente);

    if (erros.length > 0) {
        exibeMensagensDeErro(erros);

        return;
    }

    // adicionando o paciente na tabela 
    var tabela = document.querySelector("#tabela-pacientes")

    tabela.appendChild(pacienteTr);
    form.reset();

})

function exibeMensagensDeErro(erros) {
    var ul = document.querySelector("#mensagens-erro");
    erros.forEach(function (erro) {
        var li = document.createElement("li");
        li.textContent = erro;
        ul.appendChild(li);
    });
}

function pegarDadosPaciente(form) {

    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;

}

//abaixo vai montar uma função que recebe um paciente com os dados dele
//e com esses dados pode-se montar essa tr
//essa função vai receber os dados do paciente, ou seja, ela vai receber o paciente objeto como paramentro
//e apartir desse paciente ela vai saber como que cria uma tr, ou seja, ela vai me retornar uma tr criada com todas as tds

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) {

    var erros = [];

    if (!validaPeso(paciente.peso)) {
        erros.push("Peso é inválido");
    }

    if (!validaAltura(paciente.altura)) {
        erros.push("Altura Inválida")
    }

}

formulário:

<section class="container">
        <h2 id="titulo-form">Adicionar novo paciente</h2>
        <ul id="mensagens-erro"></ul>

        <form id="form-add-paciente">
            <div class="grupo">
                <label for="nome">Nome:</label>
                <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
            </div>
            <div class="grupo">
                <label for="peso">Peso:</label>
                <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente"
                    class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="altura">Altura:</label>
                <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente"
                    class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="gordura">% de Gordura:</label>
                <input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente"
                    class="campo campo-medio">
            </div>

            <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
        </form>
    </section>
4 respostas

por ultimo o calcula-imc.js

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

var paciente = document.querySelector("#primeiro-paciente")

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


for (let index = 0; index < pacientes.length; index++) {

   var paciente = pacientes[index];


   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 alturaValida = validaAltura(altura);
   var pesoValido = validaPeso(peso);

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

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

   if (alturaValida && pesoValido) {
      var imc = calculaImc(peso, altura);
      //console.log("o valor do imc é: " + imc)
      tdImc.textContent = imc;//coloca o valor resultande de imc e joga dentro da tdImc

   } else {
      //tdImc.textContent = "Altura e/ou Peso Inválidos!"
      //console.log("Altura e/ou Peso Inválidos!!!!")
   }

}

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);
}



Bom dia Alexandra,

A principio o código esta correto o que aconteceu foi que faltou um colocar um return na função validaPaciente, desse jeito :

function validaPaciente(paciente) {

    var erros = [];

    if (!validaPeso(paciente.peso)) {
        erros.push("Peso é inválido");
    }

    if (!validaAltura(paciente.altura)) {
        erros.push("Altura Inválida")
    }

    return erros;
}
solução!

Oi, Alexandra! Tudo bem?

Fiz os testes em cima do código que você postou para nós e não encontrei o erro que está descrevendo.

Ficou faltando o apontamento da colega acima, mas mesmo sem colocar o return o erro não aparece.

Experimente voltar ao código da aula anterior e repetir o passo a passo, testando as aplicações no código. Pode ser que tenha faltado um detalhe bem pequeno (apesar de estar rodando normalmente aqui comigo).

Caso persista, volte que vamos achar uma solução, Alexandra!!!

Fico no aguardo!

Boa tarde! Agradeço muito as respostas de vocês... O console sempre retornava erro na função "exibeMensagensDeErro(erros)" no seguinte trecho de código:

erros.forEach(function (erro) {

voltei no vídeo, vi passo a passinho de novo, o return, que o Cássio comentou, eu coloquei também e nada parecia funcionar :(

Até que eu chamei um colega da empresa em que eu trabalho, que é Front End, e eu não sei como e nem pq (já que o código continua o mesmo) mas voltou a funcionar (gif da nazare).

Ainda bem que no começo esse meu colega viu o erro acontecendo, se não ia achar que eu to doida!

Mas é isso aí, o código voltou a funcionar, não sei o que era o erro até agora hahahha

Obrigada mais uma vez!!!

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