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

Uncaught TypeError: Cannot read property 'altura' of null

Apesar do meu codigo estar escrito igual o do professor no terceiro video da aula 4, fica aparecendo esse erro no console do navegador: Uncaught TypeError: Cannot read property 'altura' of null at HTMLButtonElement. (principal.js:48)

ao invés de aparecer os inputs como no video do professor, segue o meu codigo abaixo para alguem poder tentar me ajudar. obrigado.

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 >= 1000){
        console.log("Peso inválido");
        pesoEhValido = false;
        tdImc.textContent = "Peso Inválido";
        paciente.classList.add("paciente-invalido")
    }

    if(altura <= 0 || altura >= 3.00){
        console.log("Altura inválida!");
        alturaEhValida = false;
        tdImc.textContent = "Altura Inválida!";
        paciente.classList.add("paciente-invalido")
    }

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

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

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

    console.log(form.altura.value);
    console.log(form.peso.value);
});

titulo.addEventListener("click", function (){
    console.log("fui clicado");
});
6 respostas

Fala ai Luiz, tudo bem? Verifica seu no seu form o input da altura tem pelo menos um id ou nome com o valor altura.

O mesmo para o input do peso.

Quando a gente faz form.altura ou form.peso, seria o mesmo que:

form.(NAME ou ID)

Onde NAME seria o valor passado para o atributo name e ID seria o valor passado para o atributo id.

Espero ter ajudado.

Tópico apagado, prossiga abaixo

Na verdade eu fiz umas correções agora nos valores de altura e peso que estavam errados, e na hora de preencher os dados de um novo paciente na pagina do navegador ele apresenta esse erro: principal.js:48 Uncaught TypeError: Cannot read property 'altura' of null at HTMLButtonElement. (principal.js:48)

Não sei mais o q pode estar errado pq meu codigo esta igual do professor e não estou conseguindo obter o mesmo resultado que ele consegue aos 3:10 minutos do terceiro video da aula 4 :(

Segue abaixo o meu código index atualizado, o codigo principal.js continua igual o q eu primeiramente postei la em cima deste topico.

</head>
<body>

    <header>
        <div class="container">
            <h2 class="titulo">Aparecida Nutrição</h2>
        </div>
    </header>
    <main>
        <section class="container">
            <h2>Meus pacientes</h2>
            <table>
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Peso(kg)</th>
                        <th>Altura(m)</th>
                        <th>Gordura Corporal(%)</th>
                        <th>IMC</th>
                    </tr>
                </thead>
                <tbody id="tabela-pacientes">
                    <tr class="paciente" id="primeiro-paciente">
                        <td class="info-nome">Paulo</td>
                        <td class="info-peso">100</td>
                        <td class="info-altura">2.00</td>
                        <td class="info-gordura">10</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente" >
                        <td class="info-nome">João</td>
                        <td class="info-peso">80</td>
                        <td class="info-altura">1.72</td>
                        <td class="info-gordura">40</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente" >
                        <td class="info-nome">Erica</td>
                        <td class="info-peso">54</td>
                        <td class="info-altura">1.64</td>
                        <td class="info-gordura">14</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente">
                        <td class="info-nome">Douglas</td>
                        <td class="info-peso">85</td>
                        <td class="info-altura">1.73</td>
                        <td class="info-gordura">24</td>
                        <td class="info-imc">0</td>
                    </tr>
                    <tr class="paciente" >
                        <td class="info-nome">Tatiana</td>
                        <td class="info-peso">48</td>
                        <td class="info-altura">1.55</td>
                        <td class="info-gordura">19</td>
                        <td class="info-imc">0</td>
                    </tr>
                </tbody>
            </table>

        </section>
    </main>

    <section class="container">
<h2 id="titulo-form">Adicionar novo paciente</h2>
<form>
    <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>
<script src="js/principal.js"></script>

</body>

Fala Luiz, compartilha o projeto completo comigo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

solução!

Caro Matheus, obrigado pela ajuda, consegui solucionar.

Magina Luiz, fico feliz que tenha resolvido seu problema.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.