Entrar Ainda não tem acesso?
3
respostas

Erro no console

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Variáveis e Operadores e atividade Buscando dados do paciente

por Rodrigo Soares da Silva
| 578.1k xp | 16 posts

Olá, alguém pode me ajudar com esse erro? Estou usando o VS.

Segui com as aulas, copiei código da própria descrição do video e mesmo assim dá esse erro:

Info: Start process (13:07:08)
Error: 
c:\Users\rodes\Desktop\Js_Alura\JS_Programandoo na linguagem da web\introducao-javascript\js\node_ecbc447ce0971.tmp:1
var paciente = document.querySelector("#primeiro-paciente");
               ^

ReferenceError: document is not defined
    at Object.<anonymous> (c:\Users\rodes\Desktop\Js_Alura\JS_Programandoo na linguagem da web\introducao-javascript\js\node_ecbc447ce0971.tmp:1:16)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47

Info: End process (13:07:08)
3 respostas
por Rodrigo Soares da Silva
| 578.1k xp | 16 posts

O meu HTML está assim:

</head>
<body>



    <header>
        <div class="container">
            <h1 class="titulo">Aparecida Nutrição</h1>
        </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>

                    <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">46</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>
    <script src="js/principal.js"></script>

</body>
por Rodrigo Soares da Silva
| 578.1k xp | 16 posts
var paciente = document.querySelector("#primeiro-paciente");

var tdPeso = paciente.querySelector(".info-peso");
var peso = tdPeso.textContent;

var tdAltura = paciente.querySelector(".info-altura");
var altura = tdAltura.textContent;

var imc = peso / altura * altura; // 100 / 2.0 x 2.0 = 100 / 4 =>>>>>>> 25

console.log(imc);
por Rafael Rocha
| 2654.5k xp | 5625 posts
Alura Scuba Team Time Alura | Apoio Educacional no Fórum

Olá Rodrigo, tudo bem com você?

Peço desculpas pela demora em lhe responder.

Os códigos HTML e JS enviados estão funcionando corretamente, apresentando o resultado esperado quando o resultado é verificado no console do navegador.

O erro apresentado está informando que não foi encontrado uma referência para o objeto document que serve como ponto de entrada para a página HTML permitindo o acesso ao DOM (Document Object Model), permitindo sua manipulação. Para que este objeto seja criado, o script deve ser executado ao final de uma página HTML e antes do fechamento da tag <body>, assim o objeto document ficará disponível para acesso no código em JavaScript.

Realizando testes e simulações com o código apresentado, creio que ocorreu a execução direta do arquivo principal.js, seja com o Node ou outro compilador. Uma execução direta faz com que o erro de referência seja levantado (ReferenceError: document is not defined), já que o objeto document que é uma representação de uma página HTML não é criado em uma execução direta. Esse objeto é criado pelo navegador que usamos para acessar uma página HTML.

Para realizar os testes do script como apresentado na aula, peço que siga os passos apresentados abaixo.

  • Abra o arquivo Index.html no navegador, recomendo que use o navegador Google Chrome.
  • Abra o painel de desenvolvedor do navegador, basta pressionar .
  • No painel que será aberto, clique na segunda aba da esquerda para a direita de nome Console.
  • Atualize a página pressionando .
  • Nesta aba será apresentado o resultado da impressão do código console.log(imc); Neste caso o valor 100.

Peço que siga os passos listados anteriormente e verifique se obtém êxito.

Para aprimorar ainda mais o seu aprendizado sobre o objeto document e o DOM, recomendo a leitura do artigo abaixo, que abordará com detalhes os principais métodos e como é a estrutura do DOM.

Espero ter ajudado. Fico à disposição em caso de dúvidas.

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!