0

Estou com problemas em uma página que calcula o IMC de uma pessoa. No meu script, era para retornar o valor de cada IMC calculado no console.log, porém ele só retorna "NaN". Já tentei mudar os valores com a função "Number()" mas não funciona. Sou novato no JS, por favor me ajudem.

/*var tdPeso = document.getElementById('peso-2');
var tdAltura = document.getElementById('altura-2');

var peso2 = tdPeso.textContent;
var altura2 = tdAltura.textContent;

var paciente2 = {peso: peso2, altura: altura2};

var tdPeso = document.getElementById('peso-1');
var tdAltura = document.getElementById('altura-1');

var peso1 = tdPeso.textContent;
var altura1 = tdAltura.textContent;

var paciente1 = {peso: peso1, altura: altura1};


var pacientes = [paciente1, paciente2];
*/
var trsPacientes = document.getElementsByClassName("paciente");

var posicaoAtual = 0;
while(posicaoAtual <= trsPacientes.length - 1){
 
	var pacienteTr = trsPacientes[posicaoAtual];

	var tdNome = pacienteTr.getElementsByClassName("info-nome")[0];
	var tdPeso = pacienteTr.getElementsByClassName("info-peso")[0];
	var tdAltura = pacienteTr.getElementsByClassName("info-altura")[0];

	var paciente = {nome : tdNome.textContent, peso : tdPeso.textContent, Altura : tdAltura.textContent };

	if((paciente.altura != 0) && (paciente.peso != 0)){
		var imc = paciente.peso / (paciente.altura * paciente.altura) ;
		
		var tdIMC = document.getElementById("imc-2");
		//tdIMC.textContent = imc;

		console.log(imc);
	}else{
		console.log("Não executei porque a altura ou peso eh igual a zero");
	}
	
posicaoAtual++;
}
header{
	height:180px;
}
header .topo{
	height:80px;
	width:100%;
}

header .topo .topo-int{
	width:100%;
	height:80px;
	background-color:#343434;
	color:white;
}

header .topo .topo-int h1{
	line-height:80px;
	font-size:1.8em;
	margin-top:0;
	margin-bottom:0;
	margin-left:5%;
}

header .topo-2{
	height:80px;
	width:100%;
}

header .topo-2 .topo-2-int{
	width:100%;
	max-width:95%;
	height:80px;
	float:right;
}

header .topo-2 .topo-2-int h1{
	line-height:80px;
	font-size:2.8em;
	margin-top:0;
	margin-bottom:0;
	padding-bottom:20px;
	border-bottom:1px solid #aaaaaa ;
}

section .corpo{
	width:100%;
	max-width:90%;
	margin:3% auto;
	/*background-color:red;*/
}

section .corpo .corpo-int{
	width:100%;
	max-width:90%;
}

section .corpo .corpo-int .tab-imc table{
	width:100%;
	min-width:500px;
	height:100px;
	border:1px solid grey;
	background-color:#D5D5D5FF;
}

section .corpo .corpo-int .tab-imc table thead tr th, section .corpo .corpo-int .tab-imc table tbody tr td{
	border:1px solid grey;
	border-radius:5px;
	width:25%;
	padding:2%;
	text-align:center;
}

section .corpo .corpo-int .tab-imc table tbody{
	padding-top:0.1%;
}

section .corpo .corpo-int .tab-imc #btn-calcular{
	margin-top:3%;
	padding:10px;
	border-radius:5px;
	font-family:Arial;
	font-size:1.7em;
	background-color:#34A0FFFF;
	color:white;
}

section .corpo .corpo-int .tab-add-imc .add-imc-tittle {
	line-height:70px;
	font-size:1.8em;
	margin-top:0;
	margin-bottom:3%;
	border-bottom:1px solid #aaaaaa ;
}

section .corpo .corpo-int .tab-add-imc .add-imc-int{
	width:100%;
	min-width:500px;
	height:200px;
	/*background-color:green;*/
}

.tab-add-imc .add-imc-int label{
	color:grey;
	font-size:1.7em;
	line-height:100px;
	margin-bottom:0;
	padding-bottom:0;
}
.tab-add-imc .add-imc-int #add_nome{
	width:80%;
}

.tab-add-imc .add-imc-int input{
	height:40px;
	border-radius:5px;
	margin-right:2%;
	margin-bottom:0;
	padding-bottom:0;
}

.tab-add-imc #btn-add-paciente{
	padding:10px;
	border-radius:5px;
	font-family:Arial;
	font-size:1.7em;
	background-color:#34A0FFFF;
	color:white;
}
footer{
	width:100%;
	height:80px;
	background-color:#343434;
	color:white;
}
<!DOCTYPE html>
<html lang='pt-br'>
	<head>
		<meta charset="utf-8">
		<title>Introdução</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<main>
			<header>
				<div class="topo">
					<div class="topo-int">
						<h1>Meus Pacientes</h1>
					</div>
				</div>
				<div class="topo-2">
					<div class="topo-2-int">
						<h1>Meus Pacientes</h1>
					</div>
				</div>
			</header>

			<section>
				<div class="corpo">
					<div class="corpo-int">

						<div class="tab-imc">
							<table>
								<thead>
									<tr>
										<th>Peso(Kg)</th>
										<th>Nome</th>
										<th>Altura(m)</th>
										<th>IMC</th>
									</tr>
								</thead>
								<tbody>
									<tr class="paciente">
										<td  class="info-nome">Leonardo</td>
										<td class="info-peso">57</td>
										<td class="info-altura">1.67</td>
										<td class="info-imc"></td>
									</tr>
									<tr class="paciente">
										<td  class="info-nome">Andre</td>
										<td class="info-peso" >50</td>
										<td class="info-altura">1.00</td>
										<td class="info-imc"></td>
									</tr>
								</tbody>
							</table>
							<button onclick="" id="btn-calcular">Calcular Imcs</button>
						</div>

						<div class="tab-add-imc">
							<div class="add-imc-tittle">
								<h1>Adicionar Novo Paciente</h1>
							</div>
							<div class="add-imc-int">	
								
								<label>Nome: </label>
								<input type="text" id="add_nome"  placeholder="Digite seu nome">
								<label>Peso(Kg): </label>
								<input type="number" id="add_peso" placeholder="Digite seu peso">
								<label>Altura(m): </label>
								<input type="number" id="add-altura" placeholder="Digite sua altura">
								
								
							</div>
							<button onclick="" id="btn-add-paciente">Adicionar Imc</button>
						</div>	
					
					</div>
				</div>
			</section>

			<footer>
			</footer>
		</main>
		<script src="calcula-imc.js"></script>
	</body>
</html>

Link da página no JSFiddle: https://jsfiddle.net/CarlosJR/j29vrxxa/4/

1 Resposta 1

1

O problema é isso:

Altura : tdAltura.textContent

Era para ser com letra minúscula:

altura : tdAltura.textContent

Só mudei isso no código e mais nada, agora parece que está funcionando:

/*var tdPeso = document.getElementById('peso-2');
var tdAltura = document.getElementById('altura-2');

var peso2 = tdPeso.textContent;
var altura2 = tdAltura.textContent;

var paciente2 = {peso: peso2, altura: altura2};

var tdPeso = document.getElementById('peso-1');
var tdAltura = document.getElementById('altura-1');

var peso1 = tdPeso.textContent;
var altura1 = tdAltura.textContent;

var paciente1 = {peso: peso1, altura: altura1};


var pacientes = [paciente1, paciente2];
*/
var trsPacientes = document.getElementsByClassName("paciente");

var posicaoAtual = 0;
while(posicaoAtual <= trsPacientes.length - 1){
 
	var pacienteTr = trsPacientes[posicaoAtual];

	var tdNome = pacienteTr.getElementsByClassName("info-nome")[0];
	var tdPeso = pacienteTr.getElementsByClassName("info-peso")[0];
	var tdAltura = pacienteTr.getElementsByClassName("info-altura")[0];

	var paciente = {nome : tdNome.textContent, peso : tdPeso.textContent, altura : tdAltura.textContent };

	if((paciente.altura != 0) && (paciente.peso != 0)){
		var imc = paciente.peso / (paciente.altura * paciente.altura) ;
		
		var tdIMC = document.getElementById("imc-2");
		//tdIMC.textContent = imc;

		console.log(imc);
	}else{
		console.log("Não executei porque a altura ou peso eh igual a zero");
	}
	
posicaoAtual++;
}
header{
	height:180px;
}
header .topo{
	height:80px;
	width:100%;
}

header .topo .topo-int{
	width:100%;
	height:80px;
	background-color:#343434;
	color:white;
}

header .topo .topo-int h1{
	line-height:80px;
	font-size:1.8em;
	margin-top:0;
	margin-bottom:0;
	margin-left:5%;
}

header .topo-2{
	height:80px;
	width:100%;
}

header .topo-2 .topo-2-int{
	width:100%;
	max-width:95%;
	height:80px;
	float:right;
}

header .topo-2 .topo-2-int h1{
	line-height:80px;
	font-size:2.8em;
	margin-top:0;
	margin-bottom:0;
	padding-bottom:20px;
	border-bottom:1px solid #aaaaaa ;
}

section .corpo{
	width:100%;
	max-width:90%;
	margin:3% auto;
	/*background-color:red;*/
}

section .corpo .corpo-int{
	width:100%;
	max-width:90%;
}

section .corpo .corpo-int .tab-imc table{
	width:100%;
	min-width:500px;
	height:100px;
	border:1px solid grey;
	background-color:#D5D5D5FF;
}

section .corpo .corpo-int .tab-imc table thead tr th, section .corpo .corpo-int .tab-imc table tbody tr td{
	border:1px solid grey;
	border-radius:5px;
	width:25%;
	padding:2%;
	text-align:center;
}

section .corpo .corpo-int .tab-imc table tbody{
	padding-top:0.1%;
}

section .corpo .corpo-int .tab-imc #btn-calcular{
	margin-top:3%;
	padding:10px;
	border-radius:5px;
	font-family:Arial;
	font-size:1.7em;
	background-color:#34A0FFFF;
	color:white;
}

section .corpo .corpo-int .tab-add-imc .add-imc-tittle {
	line-height:70px;
	font-size:1.8em;
	margin-top:0;
	margin-bottom:3%;
	border-bottom:1px solid #aaaaaa ;
}

section .corpo .corpo-int .tab-add-imc .add-imc-int{
	width:100%;
	min-width:500px;
	height:200px;
	/*background-color:green;*/
}

.tab-add-imc .add-imc-int label{
	color:grey;
	font-size:1.7em;
	line-height:100px;
	margin-bottom:0;
	padding-bottom:0;
}
.tab-add-imc .add-imc-int #add_nome{
	width:80%;
}

.tab-add-imc .add-imc-int input{
	height:40px;
	border-radius:5px;
	margin-right:2%;
	margin-bottom:0;
	padding-bottom:0;
}

.tab-add-imc #btn-add-paciente{
	padding:10px;
	border-radius:5px;
	font-family:Arial;
	font-size:1.7em;
	background-color:#34A0FFFF;
	color:white;
}
footer{
	width:100%;
	height:80px;
	background-color:#343434;
	color:white;
}
<!DOCTYPE html>
<html lang='pt-br'>
	<head>
		<meta charset="utf-8">
		<title>Introdução</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<main>
			<header>
				<div class="topo">
					<div class="topo-int">
						<h1>Meus Pacientes</h1>
					</div>
				</div>
				<div class="topo-2">
					<div class="topo-2-int">
						<h1>Meus Pacientes</h1>
					</div>
				</div>
			</header>

			<section>
				<div class="corpo">
					<div class="corpo-int">

						<div class="tab-imc">
							<table>
								<thead>
									<tr>
										<th>Peso(Kg)</th>
										<th>Nome</th>
										<th>Altura(m)</th>
										<th>IMC</th>
									</tr>
								</thead>
								<tbody>
									<tr class="paciente">
										<td  class="info-nome">Leonardo</td>
										<td class="info-peso">57</td>
										<td class="info-altura">1.67</td>
										<td class="info-imc"></td>
									</tr>
									<tr class="paciente">
										<td  class="info-nome">Andre</td>
										<td class="info-peso" >50</td>
										<td class="info-altura">1.00</td>
										<td class="info-imc"></td>
									</tr>
								</tbody>
							</table>
							<button onclick="" id="btn-calcular">Calcular Imcs</button>
						</div>

						<div class="tab-add-imc">
							<div class="add-imc-tittle">
								<h1>Adicionar Novo Paciente</h1>
							</div>
							<div class="add-imc-int">	
								
								<label>Nome: </label>
								<input type="text" id="add_nome"  placeholder="Digite seu nome">
								<label>Peso(Kg): </label>
								<input type="number" id="add_peso" placeholder="Digite seu peso">
								<label>Altura(m): </label>
								<input type="number" id="add-altura" placeholder="Digite sua altura">
								
								
							</div>
							<button onclick="" id="btn-add-paciente">Adicionar Imc</button>
						</div>	
					
					</div>
				</div>
			</section>

			<footer>
			</footer>
		</main>
		<script src="calcula-imc.js"></script>
	</body>
</html>

2
  • Cara era esse o erro, passei uma hora procurando e nada de errado, tinha me esquecido das palavras maiúsculas.Muito Obrigado
    – Carlos
    Commented 16/04/2018 às 23:04
  • @Carlos Se essa resposta resolveu o seu problema e não restou nenhuma dúvida, marque-a como correta/aceita ao clicar no "✅" que está ao lado dela, o que também marca a sua pergunta como resolvida. Se ainda te resta alguma dúvida ou gostaria de maiores esclarecimentos, fique a vontade para comentar. :) Commented 17/04/2018 às 0:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .