Entrar Ainda não tem acesso?

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!

12
respostas

Meu console não funcionou

Referente ao curso JavaScript : Programando na linguagem da web, no capítulo Conhecendo o DOM e organizando nosso código com objetos e atividade O que é DOM?

por danilo_61
| 26.3k xp | 14 posts

Foi feito o download do projeto no inicio da aula conforme orientação, porém qndo começou explicar sobre o DOM, como pegar as informações do ID etc, mas ele foi feito no .js e executado no index.html, comigo não funcionou

<!doctype html>

Meus pacientes

Meus pacientes

NomePeso(kg)Altura(m)IMC
Leonardo571.67
Paulo1002.00

Adicionar novo paciente

Nome: Peso: Altura:

//arquivo calcula-imc.js var tdPeso = document.getElementById("peso-2"); var tdAltura = document.getElementById("altura-2");

var paciente = { peso : tdPeso.textContent, altura : tdAltura.textContent};

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

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

console.log(imc); }else{ console.log("Não executei"); }

12 respostas
por Alberto Souza
| 2676.6k xp | 5740 posts
Instrutor

Oi Danilo, o que não funcionou? Para copiar os códigos, use o botão inserir código :). Copia o html do index e dos arquivos js que vc tem.

por danilo_61
| 26.3k xp | 14 posts

//arquivo calcula-imc.js var tdPeso = document.getElementById("peso-2"); var tdAltura = document.getElementById("altura-2");

var paciente = { peso : tdPeso.textContent, altura : tdAltura.textContent};

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

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

console.log(imc); }else{ console.log("Não executei"); }

<!doctype html>

Meus pacientes

Meus pacientes

NomePeso(kg)Altura(m)IMC
Leonardo571.67
Paulo1002.00

Adicionar novo paciente

Nome: Peso: Altura:

por danilo_61
| 26.3k xp | 14 posts

No vídeo é executado através do index no console e no meunão deu certo

por Alberto Souza
| 2676.6k xp | 5740 posts
Instrutor

Oi Danilo, para eu conseguir te ajudar preciso que vc faça o seguinte.

1) Copie o html do arquivo index.html e cole entre as aspas fornecidas pelo botão inserir código

2) Faça o mesmo para os arquivos javascript

3) Tente ver qual erro acontece no seu console.

por danilo_61
| 26.3k xp | 14 posts
<!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>


/arquivo calcula-imc.js
var tdPeso = document.getElementById("peso-2");
var tdAltura = document.getElementById("altura-2");     


var paciente = { peso : tdPeso.textContent, altura : tdAltura.textContent};    

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

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

    console.log(imc);
}else{
    console.log("Não executei");
}
por Aline Dias
| 164.4k xp | 32 posts

Não está funcionando porque seu código está fora das tags html.

Primeiro link seu arquivo JS usando a tag script antes do fechamento da tag body

<script type="text/javascript" src="seuarquivo.js"></script>

Depois insira seu código javascript nesse seu arquivo criado.

Exclua essa / do seu código, pois assim não irá funcionar. Para adicionar comentários em uma linha utilize //

por danilo_61
| 26.3k xp | 14 posts
<!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">
        <script>
        //arquivo calcula-imc.js

        var tdPeso = document.getElementById("peso-2");
var tdAltura = document.getElementById("altura-2");     


var paciente = { peso : tdPeso.textContent, altura : tdAltura.textContent};    

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

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

    console.log(imc);
}else{
    console.log("Não executei");
}

        </script>


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

Isso ? mesmo assim não funcionou no console, no vídeo ele testa pelo arquivo index.

Não foi muito claro sua explicação

por Alberto Souza
| 2676.6k xp | 5740 posts
Instrutor

Oi Danilo, pega todo o código <script>...</script> e move para antes do fechamento </body>. O problema é que vc está executando o javascript antes das tags html que possuem os valores e assim, na hora da execução, os elementos ainda não existe.

por danilo_61
| 26.3k xp | 14 posts

Oi Alberto,

Agora foi claro, deu certo! Obrigado.

E agora como faço para executar o calculo do IMC das duas pessoas e tbm como faço para executar através do arquivo externamente, chamando ele na pasta js ??

por Alberto Souza
| 2676.6k xp | 5740 posts
Instrutor

Para executar através do arquivo vc precisa pegar o código entre as tags script, jogar dentro de um arquivo, em geral com a extensão .js e importá-lo da sua página. Assim:

<script src="caminhoDaPasta/arquivo.js"></script>

Para pegar os imcs de todos pacientes vou deixar de desafio para vc.. Você precisa fazer um código que retorne as informações de cada linha da tabela e ir calculando.

por danilo_61
| 26.3k xp | 14 posts

Dei continuidade as aulas e mesmo foi feito o exemplo conforme vídeo porém nao executa, consegue me ajudar ?

            <!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>
        //arquivo calcula-imc.js

        var trsPacientes = document.getElementByClassName ("paciente"); //array

var posicaoAtual = 0;
while(posicaoAtual <= trsPacientes.length - 1){

    var pacienteTr = trsPacientes[posicaoAtual];

    var tdNome = pacienteTr.getElementByClassName("info-nome")[0];
    var tdPeso = pacienteTr.getElementByClassName("info-peso")[0];
    var tdAltura = pacienteTr.getElementByClassName("info-altura")[0];

    var paciente = {nome : tdNome.textContent, peso : textContent, altura : tdAltura.textContent};





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

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

    console.log(imc);
}else{
    console.log("Não posso dividir por zero");
}

posicaoAtual++

}    

        </script>

    </body>

</html>
por Rodrigo Pereira
| 13.5k xp | 5 posts

Danilo, você está com erro de sintaxe quando chama getElementByClassName, o correto é getElementsByClassName com o element no plural como destacado.

Além disso, nessa linha:

var paciente = {nome : tdNome.textContent, peso : textContent, altura : tdAltura.textContent};

você esqueceu de por o tdPeso antes do textContent do peso, deveria ficar assim:

var paciente = {nome : tdNome.textContent, peso : tdPeso.textContent, altura : tdAltura.textContent};

Espero que tenha ajudado Danilo.

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA