Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
10
respostas

Erro mesmo no exercício baixado do site

Boa noite! To tentando acompanhar a aula 3.2 de javascript mas ta bem difícil! Tentei fazer do meu jeito e deu erro. Então tentei baixar do próprio site, e dá o mesmo erro. Acho que o problema não sou eu.

To tentando pegar o peso de paulo pelo código:

var peso = document.getElementById("peso-1").textContent; // pega o peso do paciente
var altura = document.getElementById("altura-1").textContent; // pega a altura do paciente
var nome = document.getElementById("nome-1").textContent; // pega o nome do paciente

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

if(paciente.altura != 0){
    var imc = paciente.peso / (paciente.altura * paciente.altura);

    var tdDoImc = document.getElementById("imc-1"); // pega o td do imc do paciente 1
    tdDoImc.textContent = imc; //Altera o conteúdo do td para o valor da variável imc

    console.log(imc);
}else{
    console("Não posso executar uma divisão por 0!");
}

Mas no navegador dá sempre o erro "TypeError: document.getElementById(...) is null"

Alguém pode dar uma forcinha ai?

10 respostas

Esqueci de avisar: O peso de Paulo não está vazio, está preenchido corretamente.

Poderia compartilhar o seu 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>

Tentei por o código como bloco de texto mas não foi, conforme apareceu acima. O código HTML é o fornecido no curso de javascript aula 3, Download aqui

Utiliza 3 acentos graves para formatar

Sim eu sei, mas por algum motivo não está formatando o código que mando. (Pode perceber que os três acentos estão aparecendo antes e depois do código.

solução!

O erro se encontra na seguinte linha:

var nome = document.getElementById("nome-1").textContent; // pega o nome do paciente

No html existem arquivos com este id "nome-1", por isso da erro e não executa o resto.

Não existem

Desculpa me atrapalhei um pouco com as palavras.

Não existem tags que tenham o id "nome-1", por isso acontece o erro.

Putz, cara! Não sabia que no JS o código inteiro não rodava por causa de um errinho. Valeu!