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

Erros inexplicaveis

Boa tarde pessoal, estou tendo alguns erros que nao estou entendo, ja comparei meu código com o do instrututor umas 4 vezes e não consigo achar de jeito nenhum, segue print dos erros.

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

Código: form.js -

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

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

    //Extraindo irfomações do paciente do formulario
    var paciente = obtemPacienteDoFormulario(form);

    //criar a tr e a td do paciente
    var pacienteTr = montaTr(paciente);

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

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

}

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

    var nomeTd = document.createElement("td");
    var pesoTd = document.createElement("td");
    var alturaTd = document.createElement("td");
    var gorduraTd = document.createElement("td");
    var imcTd = document.createElement("td");

    nomeTd.textContent = paciente.nome;
    pesoTd.textContent = paciente.peso;
    alturaTd.textContent = paciente.altura;
    gorduraTd.textContent = paciente.gordura;
    imcTd.textContent = paciente.imc;

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

    return pacienteTr;
}

Código: calcula-ims.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 = true;
    var alturaEhValida = true;

    if (peso <= 0 || peso >= 500) {
        pesoEhValido = false;
        tdPeso.textContent = "Peso invalido";
        paciente.classList.add("paciente-invalido");
    }

    if (altura <= 0 || altura >= 3.00) {
        alturaEhValida = false;
        tdAltura.textContent = "Altura invalida";
        paciente.classList.add("paciente-invalido");
    }

    if (pesoEhValido && alturaEhValida) {
        var imc = peso / altura * altura;
        tdImc.textContent = imc.toFixed(2);
    } else {
        tdImc.textContent = "Valores invalidos"
    }
}

function calculaImc(peso, altura) {
    var imc = 0;

    imc = peso / (altura * altura);

    return imc.toFixed(2);
}
3 respostas

Boa tarde,

O Segundo erro foi resolvido, estava faltando apenas o return no final da função obtemPacienteDoFormulario(form). Mas o primeiro ainda nao descobri o problema. Código corrigido obtemPacienteDoFormulario(form):

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;

}
solução!

Olá Henrique, tudo bem?

Ficou feliz que conseguiu solucionar o segundo erro!

Explicarei a seguir sobre o que está causando o primeiro erro.

O erro aponta que o não é possível ler o querySelector da seguinte linha do arquivo calcula-imc.js

var tdPeso = paciente.querySelector(".info-peso");

Mas por que?

A busca por essa classe ocorre dentro de um for e ao analisar o for notei um erro de sintaxe. No código, a variável iteradora (i) está dizendo que vai até ser menor ou igual ao pacientes.length, porém ela precisa ir até ser só menor que o tamanho do array, conforme o modelo da aula.

Como está:

for (var i = 0; i <= pacientes.length; i++) {

Código da aula:

for (var i = 0; i < pacientes.length; i++) {

Ok! Mas por que precisa ser só menor e não menor igual?

Supondo que o tamanho do array seja 5 (1 2 3 4 5) e a posição do iterador começa no 0, caso o iterador vá até ser igual o tamanho do array, ele irá rodar as 6 posições (0 1 2 3 4 5) e na última posição (5) dará um erro, visto que o array tem 5 elementos e não 6. Sendo assim, na última rodada do laço, ao tentar buscar as classes com o querySelector, o resultado será undefined, já que o 6º elemento não existe no array. Com isso, o navegador apontará o erro no primeiro querySelctor do laço quando estiver na última posição de i, mas na verdade nenhum querySelector terá sucesso nessa última posição.

Dessa forma, independente do tamanho do array, o iterador deverá rodar até ser menor que o seu tamanho quando iniciar em 0.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!

Shoow, muuuito obrigado pela explicação, didatica excelente.