Estou seguindo passo a passo as lições do curso de Java Script básico, mas continuo vendo erros no meu console.
Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined
imprime-nome.js:4
Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined
calcula-ims.js:5
O erro é claro e aponta para a
var tdNome = pacienteTr.getElementsByClassName("info-nome")[0];
As minhas páginas estão aparentemente de acordo com a aula.
IMPRIME-NOME.JS
var trsPacientes = document.getElementsByClassName("paciente") // Array de tabela
percorreArray(trsPacientes, function (pacienteTr){
var tdNome = pacienteTr.getElementsByClassName("info-nome")[0];
var tdPeso = pacienteTr.getElementsByClassName("info-peso")[0];
var tdAltura = pacienteTr.getElementsByClassName("info-altura")[0];
var pacienteAtual = {nome : tdNome.textContent,
peso : tdPeso.textContent,
altura : tdAltura.textContent,
pegaImc : function(){
if(this.altura != 0){
var imc = this.peso / (this.altura * this.altura);
return imc;
} else{
console("Não posso executar uma divisão por 0!");
}
}};
console.log(pacienteAtual.nome);
});
CALCULA-IMS.JS (sei que o nome da página foi salvo errado, mas isso não está influenciando!)
var trsPacientes = document.getElementsByClassName("paciente"); //Array de Trs
percorreArray(trsPacientes, function(pacienteTr){
var tdNome = pacienteTr.getElementsByClassName("info-nome")[0];
var tdPeso = pacienteTr.getElementsByClassName("info-peso")[0];
var tdAltura = pacienteTr.getElementsByClassName("info-altura")[0];
var pacienteAtual = {nome : tdNome.textContent,
peso : tdPeso.textContent,
altura : tdAltura.textContent,
pegaImc : function(){
if(this.altura != 0){
var imc = this.peso / (this.altura * this.altura);
return imc;
} else{
console("Não posso executar uma divisão por 0!");
}
}};
var imc = pacienteAtual.pegaImc();
var tdImc = paciente.Tr.getElementsByClassName("info-imc")[0];
tdImc.textContent = imc;
console.log(imc);
});
PERCORRE.JS
function percorreArray(trsPacientes, comportamento){
for (var posicaoAtual = 0; posicaoAtual <= trsPacientes.length - 1; posicaoAtual++){
var pacienteTrAtual = trsPacientes[posicaoAtual];
comportamento();
}
}
INDEX.HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meus pacientes</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="alura.css">
</head>
<body>
<header>
<div class="container">
<h1>Meus pacientes</h1>
</div>
</header>
<main class="container">
<section>
<h2>Meus pacientes</h2>
<table>
<tr>
<th>Nome</th>
<th>Peso(kg)</th>
<th>Altura(m)</th>
<th>IMC</th>
</tr>
<tr class="paciente">
<td class="info-nome">Leonardo</td>
<td class="info-peso" id="peso-1">57</td>
<td class="info-altura" id="altura-1">1.67</td>
<td class="info-imc1" id="imc-1"></td>
</tr>
<tr class="paciente">
<td class="info-nome">Paulo</td>
<td class="info-peso" id="peso-2">100</td>
<td class="info-altura" id="altura-2">2.00</td>
<td class="info-imc2" id="imc-2"></td>
</tr>
</table>
<button id="calcula-imcs" class="botao ">Calcular Imcs</button>
</section>
<section>
<h2>Adicionar novo paciente</h2>
<form>
<fieldset>
<label for="nome">Nome:</label>
<input id="campo-nome" type="text" placeholder="digite o nome do seu paciente">
</fieldset>
<fieldset class="campo-medio">
<label for="peso">Peso:</label>
<input id="campo-peso" type="text" placeholder="digite o peso do seu paciente">
</fieldset>
<fieldset class="campo-medio">
<label for="altura">Altura:</label>
<input id="campo-altura" type="text" placeholder="digite a altura do seu paciente">
</fieldset>
<button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
</form>
</section>
</main>
<script src="percorre.js"></script>
<script src="calcula-ims.js"></script>
<script src="imprime-nome.js"></script>
</body>
</html>
Alguém consegue me ajudar? Estou achando esse módulo realmente muito difícil e complexo. As aulas passam o conteúdo muito rapidamente e está difícil fazer as associações assim. Agradeço a atenção de todos.