Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Tabela não atualiza

Olá! Estou no capítulo 3 do curso, com os arquivos "calcula-imc.js" e o "index.html" já codificados e prontos para calcular o imc do segundo paciente. Porém, ao clicar no botão "Calcular imc", a tabela não é atualizada. Seguem os códigos abaixo:

//calcula-imc.js

var tdPeso = document.getElementById("peso-2").textContent;
var tdAltura = document.getElementById("altura-2").textContent;
var paciente = {
    altura : tdAltura,
    peso : tdPeso
};
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 é possível realizar divisão por 0");
}

//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>
        <script src="calcula-imc.js"></script>
    </body>
</html>

Já comparei por diversas vezes os códigos do curso e os meus, mas não achei nada muito diferente a ponto de dar erro. O que será que está ocorrendo? Muito obrigado desde já!

2 respostas

Pelo que eu vi do código, está faltando uma aspas no seguinte trecho:

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

O correto seria:

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

Nesse código que você postou não tem o addEventListener para o botão, então ele vai tentar fazer direto ao abrir a página. Para vincular alguma programação ao clique do botão teria que fazer algo assim:

var botao = document.getElementById("calcula-imcs");
botao.addEventListener("click", function() {
    //Programacao para executar ao clicar no botao
));
solução!

Daniel, muito obrigado! Realmente foi uma grande falha de atenção minha! A gente que não enxerga deve estar bem mais atento aos detalhes de codificação, embora isso também aconteça com vocês que enxergam! RSRS Mas vivendo e aprendendo, sobretudo quando temos a ajuda de pessoas prestimosas como as que existem aqui no fórum da Alura! Inclusive segui a sua dica e coloquei a função de calcular no clique do botão e deu tudo certo! Um abraço!