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

Aula 3. Exercício "Utilizando objetos"

Boa tarde, o console do meu navegador está acusando um erro que não estou conseguindo solucionar.

Código html:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Meus pacientes</title>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" type="text/css" href="alura.css">
    </head>
    <body>
        <header>
            <div class="container">
                <h1>Meus pacientes</h1>
            </div>
        </header>
        <main class="container">
            <section>
                <h2>Meus pacientes</h2>
                <table>
                    <tr>
                        <th>Nome</th>
                        <th>Peso(kg)</th>
                        <th>Altura(m)</th>
                        <th>IMC</th>
                    </tr>
                    <tr class="paciente">
                        <td class="info-nome">Leonardo</td>
                        <td class="info-peso" id="peso-1">57</td>
                        <td class="info-altura" id="altura-1">1.67</td>
                        <td class="info-imc" id="imc-1"></td>
                    </tr>
                    <tr class="paciente">
                        <td class="info-nome">Paulo</td>
                        <td class="info-peso" id="peso-2">100</td>
                        <td class="info-altura" id="altura-2">2.00</td>
                        <td class="info-imc" id="imc-2"></td>
                    </tr>
                </table>
                <button id="calcula-imcs" class="botao ">Calcular Imcs</button>
            </section>
            <section>
                <h2>Adicionar novo paciente</h2>    
                <form>
                    <fieldset>
                        <label for="nome">Nome:</label>
                        <input id="campo-nome" type="text" placeholder="digite o nome do seu paciente">
                    </fieldset>
                    <fieldset class="campo-medio">
                        <label for="peso">Peso:</label>
                        <input id="campo-peso" type="text" placeholder="digite o peso do seu paciente">
                    </fieldset>
                    <fieldset class="campo-medio">
                        <label for="altura">Altura:</label>
                        <input id="campo-altura" type="text" placeholder="digite a altura do seu paciente">
                    </fieldset>
                    <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
                </form>
            </section>
        </main>

        <script src="calcula-imc.js"></script>

    </body>
</html>

Código JavaScript:

var peso = document.getElementById("peso-1").textContent;
var altura = document.getElementById("altura-1").textContent;
var nome = document.getElementById("nome-1").textContent;

var paciente = {peso : peso, altura : altura, nome : nome};

if (paciente.altura != 0) {

    var imc = paciente.peso / (paciente.altura * paciente.altura);
    console.log(imc);


} else {

    console.log("O cálculo não foi exibido por a altura não pode ser 0");

}

Erro do console:

Uncaught TypeError: Cannot read property 'textContent' of null
4 respostas

Heitor,

Você está procurando pelos campos:

var peso = document.getElementById("peso-1").textContent;
var altura = document.getElementById("altura-1").textContent;
var nome = document.getElementById("nome-1").textContent;

Mas não existe nenhum elemento no HTML com esses três IDs que você passou aí. Com isso, eles retornam null e o erro diz que a propriedade textContent não existe para o valor null.

Altere os IDs que você quer recuperar e tente novamente.

Estão definidos aqui:

<tr class="paciente">
                        <td class="info-nome">Leonardo</td>
                        <td class="info-peso" id="peso-1">57</td>
                        <td class="info-altura" id="altura-1">1.67</td>
                        <td class="info-imc" id="imc-1"></td>
</tr>

Hm. Não tinha visto por causa do conceito. Passei batido, pois td não possuem o atributo ID. Na verdade, em HTML 5, a tag td perdeu vários atributos, ficando somente com aqueles que dizem respeito realmente às tables:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td

Por isso ele não vai recuperar seu elemento. Esses valores fixos que você está usando na table, nunca serão utilizados para o cálculo que você quer fazer. Normalmente estes valores virão numa consulta ou serão armazenados em um array usando javascript. E aí, se você precisar dos valores, você pega do array ao invés de pegar dos elementos HTML.

solução!

Desculpe a minha falta de atenção. Apenas tinha esquecido de definir o id do nome kkkkkkkk

Antes:

<tr class="paciente">
    <td class="info-nome">Leonardo</td>
    <td class="info-peso" id="peso-1">57</td>
    <td class="info-altura" id="altura-1">1.67</td>
    <td class="info-imc" id="imc-1"></td>
</tr>

Depois:

<tr class="paciente">
    <td class="info-nome" id="nome-1">Leonardo</td>
    <td class="info-peso" id="peso-1">57</td>
    <td class="info-altura" id="altura-1">1.67</td>
    <td class="info-imc" id="imc-1"></td>
</tr>

Mas obrigado pela ajuda!