2
respostas

IMC não aparece

Aparece esse erro no console TypeError: tdPeso is nullPor que o tdPeso está null?

html :
<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>
js: 
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;


2 respostas

Olá Cintya, tudo bem com você?

Isso aconteceu porque você colocou o id no lugar errado, veja:

<td class="info-nome" id="primeiro-paciente">Paulo</td>

Na verdade deveria ser em nossa <tr>:

<tr class="paciente" id="primeiro-paciente">

Porque depois em nosso código estamos procurando dentro da <tr> os elementos com classe info-peso, info-altura, entre outros :)

Quando você colocou na <td> não há como pesquisar pois não tem nenhum outro elemento dentro dessa tag além do texto :)

Então basta apenas substituir onde você colocou o id que irá funcionar corretamente!

Compreendeu?

Abraços e Bons Estudos!

Estou bem e você? Compreendi sim, de fato eu deveria ter colocado o id na classe paciente. Muito obrigada pela ajuda, Giovani.

Abraços!