IMC NÃO APARECE | JavaScript: programando na linguagem da web

Eu fiz tudo certinho e não sei o que ta dando de errado.

</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" >
                        <td class="info-nome" id="primeiro-paciente">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>

// essa é do js

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

titulo.textContent = "Aparecida 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;

Olá, Rui! Tudo certo?

O seu arquivo principal.js está correto, porém tem um detalhe no seu arquivo html:

No seu código, o id primeiro-paciente está na tag td referente ao nome do paciente, ou seja, uma informação do paciente.

Mas esse id deveria estar na tag tr, onde estão todas as informações do paciente (como o peso e a altura, que é usada para calcular o imc).

O trecho de código ficará assim:

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

Caso tenha ficado com alguma dúvida, não deixe de compartilhar!

Continue praticando e evoluindo na sua jornada.

Bons estudos e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Chegou a hora de transformar