Entrar Ainda não tem acesso?
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 Desenvolvedor e 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 Desenvolvedor e 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
Desenvolvedora Front-end

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 Desenvolvedor e 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 Desenvolvedor e 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
Desenvolvedor Front-End

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.