Estou usando este simples codigo e nao consigo visualizar o valor, no console ele aponta NULL.
var paciente = document.querySelector("#paciente1");
console.log(paciente);
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