Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Dúvida no Ex. 3 da Aula 3 - Conhecendo o DOM e organizando nosso código com objetos

Referente ao curso JavaScript : Programando na linguagem da web, no capítulo Coleções e loops e atividade Notação de Array

por Vinícius Nóbrega
| 25.9k xp | 21 posts

Boa tarde,

O valor calculado do IMC não aparece quando recarrego o site do "Meus pacientes", qual poderia ser o erro? 

index.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>
    </body>
</html>

calcula-imc.js

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);
    tdDoImc.textContent = imc;
    console.log(imc); //imprime 25

} else {
    console.log("Altura igual a zero, não foi possível mostrar o valor!");
}
7 respostas
por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

Olá Vinicius! Creio que o erro é porque você não declarou a variavel tdDoImc

Antes de atribuir a ela o valor você deve declara-la:

var tdDoImc = document.getElementById("imc-1")

Então depois você atribui o valor através da linha de código que você digitou:

tdDoImc.textContent = imc;
por Vinícius Nóbrega
| 25.9k xp | 21 posts

Declarei, que era o que faltava. Mas mesmo assim não está aparecendo no campo IMC da página o valor calculado...

por Vinícius Nóbrega
| 25.9k xp | 21 posts

Segue o código js atualizado :

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

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


if (paciente.altura != 0) {

var imc = paciente.peso / (paciente.altura * paciente.altura);
    tdDoImc.textContent = imc;
    console.log(imc); //imprime 25

} else {
    console.log("Altura igual a zero, não foi possível mostrar o valor!");
}
por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

Vinicius não está aparecendo por causa de dois problemas:

1 - Você não pos a referencia ao seu arquivo .js ao final da tag <body> ou seja, é como se sua página HTML não tivesse nenhum arquivo JavaScritp, então adicione ao final da tag body a tag <script> assim:

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

2 - Você não atribuiu um id a tag <td> que possui o nome do paciente e você esta ponde ela em uma variavel no seu arquivo JavaScript, mas por o id não existir da erro e o código não roda.

Veja como está :

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

Quando deveria estar :

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

Pois você está utilizando essa tag no seu código:

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

Espero ter ajudado. Bons Estudos!

por Vinícius Nóbrega
| 25.9k xp | 21 posts

Obrigado Romário, mas mesmo com essas correções não funcionou o botão "Calcular Imcs" para que o campo IMC fosse calculado e aparecesse na página.

Código html atualizado:

<!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" 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>
                    <tr class="paciente">
                        <td class="info-nome" id="nome-2">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>
solução!
por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

Achei que sua dúvida era apenas porque não estava aparecendo o IMC, então busquei apenas atender essa dúvida. Durante as aulas você de inicio não aprende como colocar o botão, apenas como funciona pra realizar o calculo e pra colocar no campo correto, perceba que sua dúvida foi referente a aula 3. Apenas mais adiante, na aula 6 que você verá como por o botão para funcionar. No entanto, se você desejar eu mostro aqui como faz, mas acho melhor você assistir as aulas.

Bons Estudos!

por Vinícius Nóbrega
| 25.9k xp | 21 posts

Obrigado, Romário! Agora entendi o porque, do botão não estar funcionando.