DOM - quando uso document retorna valor, mas quando uso paciente retorna null | JavaScript: programando na linguagem da web

Solucionado (ver solução)

Solucionado
(ver solução)

1
resposta

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Variáveis e Operadores e atividade Calculando e exibindo o IMC corretamente

por Juliana Mozaga Neves

| 60.3k xp | 3 posts

paciente = document.querySelector("#p01"); ( No html está id = p01)
var tdPeso = document.querySelector(".info-peso");  //retorna o valor 

var tdPeso = paciente.querySelector(".info-peso"); 
// retorna null no console e da erro principal.js:7 Uncaught TypeError: Cannot read properties of null (reading 'textContent')

HTML 
    <tbody id="tabela-pacientes">
                        <tr class="paciente" >
                            <td class="info-nome" id="p01">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>

1 resposta

solução!

por Felipe Miranda Marreiros

| 102k xp | 4 posts

05/01/2022

Boa noite, Juliana.

Você não colocou o tipo de variável em:

paciente = document.querySelector("#p01");

O certo seria:

var paciente = document.querySelector("#p01");

Agora, da parte do arquivo HTML, você tem que declarar a classe com ID no paciente.

<tr class="paciente"  id="p01" >

Você deve estar se perguntando o porquê do retorno de null. Bem, info-nome é um elemento que faz parte de paciente. Ele é um elemento único. Ou seja, não tem subelementos. Naturalmente ele retornará vazio.

Paciente é, na verdade, uma Array se você olhar de outro modo.

const paciente = [nome, peso, altura, gordura, imc];

Código final:


var paciente = document.querySelector("#p01");
var tdPeso = paciente.querySelector(".info-peso");

console.log(tdPeso.textContent);