Estou usando este simples codigo e nao consigo visualizar o valor, no console ele aponta NULL.
var paciente = document.querySelector("#paciente1");
console.log(paciente);
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Estou usando este simples codigo e nao consigo visualizar o valor, no console ele aponta NULL.
var paciente = document.querySelector("#paciente1");
console.log(paciente);
Willian, como está o seu html? Fiz um teste rápido usando o html abaixo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="paciente">
</div>
</body>
</html>e testando no console, consegui pegar a div. Confirma se tem algum elemento com o id paciente1.
Oi, willian
O querySelector só indica de onde você quer extrair os valores, para pegar esse valor você pode usar o value ou criar uma nova variável a usar o textContent dessa forma:
var paciente = document.querySelector("#paciente1").value;ou
var paciente = document.querySelector("#paciente1");
var x = paciente.textContent;então joão esse é meu html
<tr class="paciente" id="paciente1">
<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>e esse é meu java script
var paciente = document.querySelector("#paciente1");
var x = paciente.textContent;
console.log(x);tanto desta forma quanto desta
var paciente = document.querySelector("#paciente1").value;
console.log(paciente);esta dando um erro no meu console :
principal.js:1 Uncaught TypeError: Cannot read property 'value' of null at principal.js:1
Faz sentido este erro estar acontecendo. Você pega o paciente1 com o querySelector, mas o paciente 1 não tem value, ele tem uma lista de elementos. tente fazer algo assim:
var paciente = document.querySelector("#paciente1");
var pacienteNome = paciente.querySelector(".info-nome");
console.log(pacienteNome.textContent);Entendi, acrescentar o seguinte:
for(var i = 0; i < pacientes.length; i++) {
var paciente = pacientes[i];
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");
console.log(altura);Você cria variáveis para receber os valores das classes e exibe no console, veja se funciona.
ambos os códigos apresentam o mesmo erro estou utilizando o brackets e ele fica apontando erros no meu codigo mesmo com a semântica correta . (eu acho rsrs) ele diz que meu document é [no-undef] não esta definida
e uma variavel "x" que declarei ele me informa o seguinte: erro is assigned a value but never used. [no-unused-vars]
e quando tento printar no console no codigo ele apresenta isto: 'console' is not defined :/ sera que o problema esta no brackets?
A variável x não é mais necessária então pode elimina-lá, você poderia postar seu código completo js e html para darmos uma olhada?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aparecida Nutrição</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/principal.js" type="text/javascript"></script>
</head>
<body>
<header>
<div class="container">
<h1>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" id="paciente1">
<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>
<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>
</body>
</html>var paciente = document.querySelector("#paciente1");
for(var i = 0; i < paciente.length; i++){
var x = paciente[i];
var peso = paciente.querySelector(".info-peso");
var p = peso.textContent;
console.log(p);
}tentei desta forma tambem como sugerido pelo joão
var paciente = document.querySelector("#paciente1");
var pacienteNome = paciente.querySelector(".info-nome");
console.log(pacienteNome.textContent);Você está chamando paciente para pegar o atributo do paciente quando na verdade deveria usar o x:
var paciente = document.querySelector("#paciente1");
for(var i = 0; i < paciente.length; i++){
var x = paciente[i];
var peso = x.querySelector(".info-peso");
var p = peso.textContent;
console.log(p);
}Acredito que dessa forma também funcione:
var pacientes = document.querySelectorAll(".paciente");
for(var i = 0; i < pacientes.length; i++) {
var paciente = pacientes[i];
var tdPeso = paciente.querySelector(".info-peso");
var peso = tdPeso.textContent;
var tdAltura = paciente.querySelector(".info-altura");
var altura = tdAltura.textContent;
console.log(altura);
console.log(peso);
}Na verdade estou tendo problema por que meu codigo não esta aceitando meu document e meu console, ele pede para que eu declare ambos. ele não esta reconhecendo ambos como comandos nativos da própria linguagem