Entrar Ainda não tem acesso?
9
respostas

IMC e o console log não funcionam

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Variáveis e Operadores e atividade Calculando e exibindo o IMC corretamente

por Leonardo Herbas Souza
| 23.8k xp | 11 posts

Fiz todo o código como a aula pediu, mas não aparece o conteúdo do console.log nem o resultado/mudança do IMC na tabela

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Aparecida Nutrição</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="" type="text/css" href="css/index.css">


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

o arquivo principal.js

var titulo = document.querySelector("title"); 
titulo.textContent = "Apareceida Nutricionista";

var paciente = document.querySelector(".paciente");

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 imc = peso / (altura * altura);

tdImc.textContent = imc;

estou usando o sublime text 3

9 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Leonardo, tudo bem?

O problema está na variável paciente, você está pegando todas as informações do da classe paciente, mas nesse primeiro momento, você só irá testar o imc do primeiro-paciente, portanto na vaciável paciente, declare:

var paciente = document.querySelector("#primeiro-paciente");

Assim, ele pegará os valores do paciente Paulo e irá fazer o cáculo do imc.

Espero ter te ajudado!

por Leonardo Herbas Souza
| 23.8k xp | 11 posts

Fiz a mudança, mas continua sem mudança no resultado

var titulo = document.querySelector("title"); 
titulo.textContent = "Apareceida Nutricionista";

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 tdImc = paciente.querySelector(".info-imc");
var imc = peso / (altura * altura);

tdImc.textContent = imc;
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Leonardo, tudo bem?

Segue o print do teste que fiz com o código que você disponibilizou fazendo a altareção que sugeri pra que podesse pegar os valores do primeiro-paciente.

Verique se o arquivo principal.js está dentro da pasta js como você chamou em <script src="js/principal.js" ></script>

Espero ter te ajudado!

por Leonardo Herbas Souza
| 23.8k xp | 11 posts

Continua sem mudança https://imgur.com/a/zI46IAJ

por Guilherme Bastos
| 54.3k xp | 6 posts

Leonardo, eu coloquei esse código aqui e funcionou. A única forma de não aparecer é se o html não conseguir achar o arquivo principal.js dentro da pasta js.

por Leonardo Herbas Souza
| 23.8k xp | 11 posts

https://imgur.com/NaU4nZe Ele está tanto ali quanto na pasta "js"

por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Leonardo, tudo bem?

Você quer compartilhar seu projeto no google drive ou no github para testar extamente como ele está na sua máquina?

por Leonardo Herbas Souza
| 23.8k xp | 11 posts

https://imgur.com/a/QITvlYn , a foto do console https://github.com/LeoHS1/Alura-projeto

por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Leonardo, tudo bem?

Você viu se o nome do seu arquivo está igual ao que você chamou dentro da tag script? No caso, precisam estar iguais. Se preferir também coloca seu código completo no github para que posamos testar e ver o que pode estar ocorrendo.