I'm having problems on a page that calculates a person's BMI. In my script, it was to return the value of each calculated BMI in console.log , however it only returns " NaN ". I have tried to change the values with the function " Number() " but it does not work. I'm new to JS, please help me.
/*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>JSFiddle Page Link: link