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

Não consigo resolver este problema

Preciso mto de ajuda pois não estou conseguindo dar continuidade ao curso, 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

</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>
4 respostas

Segue abaixo o código JS q também está idêntico ao do professor.

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");
});
solução!

Um ponto que pude reparar Luiz é que você esqueceu de adicionar o id na tag form:

<form id="form-adiciona">

sem o id não é possível localizar esse elemento no dom com o document.querySelector por id:

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

Mto obrigado!!! Era isso mesmo

Por nada Luiz \o/