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

Aula 3 - Erro: TypeError: document.getElementById(...) is null

Esse ou qualquer outro id sempre dá null, o que pode ser?

<!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>
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 (altura != 0) {
    var imc = paciente.peso / (paciente.altura * paciente.altura);

    var tdImc = document.getElementById("imc-1");
    tdImc.textContent = imc;

    console.log(imc);
} else {
    console.log("A altura precisa ser diferente de 0!");
}
3 respostas
solução!

Olá Leandro! Seu problema é que você não adicionou o id a tag <td> do nome do paciente e perceba que você utiliza no seu código JavaScript um id que não existe:

HTML:

                <tr class="paciente">
                    <td class="info-nome">Leonardo</td> // VOCÊ NÂO ADICIONOU O ID AQUI!
                    <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>

JavaScript:

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

Para funcionar basta adicionar o id a tag ficando assim:

<td class="info-nome" id = "nome-1">Leonardo</td>

Espero ter ajudado! Bons Estudos!

caramba... não acredito! rsrs... deu certo, muito obrigado!

Por nada Leandro! Estamos aqui para ajudar. Se não tiver mais dúvida feche o tópico por favor.