Estou selecionando o querySelectorAll para que calcule o IMC de todos da tabela, mas ele só calcula o ultimo paciente. Não sei onde esta o problema, alguem me ajuda? Segue abaixo o código:
<!DOCTYPE HTML>
<html lang="pt-br">
<meta charset="utf-8">
<head>
<title>Exercícios do JS</title>
<link rel="stylesheet" href="css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Rajdhani&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="caixa">
<img class="logojs" src="./img/logo js.jpg" alt="logo do JavaScript">
<h1 class="titulo">Tabela de Pacientes</h1>
</div>
</header>
</body>
<main>
<table>
<thead>
<tr>
<td>Nome</td>
<td>Idade</td>
<td>Peso (kg)</td>
<td>Altura(m)</td>
<td>Imc</td>
</tr>
</thead>
<tbody>
<tr class="paciente">
<td>Cassia</td>
<td>24</td>
<td class="peso">69.100</td>
<td class="altura">1.67</td>
<td class="resultado-imc"></td>
</tr>
<tr class="paciente">
<td>Elaine</td>
<td>56</td>
<td class="peso">70</td>
<td class="altura">1.67</td>
<td class="resultado-imc"></td>
</tr>
<tr class="paciente">
<td>Rebeca</td>
<td>4</td>
<td class="peso">20</td>
<td class="altura">1.00</td>
<td class="resultado-imc"></td>
</tr>
<tr class="paciente">
<td>Marcio</td>
<td>30</td>
<td class="peso">90.600</td>
<td class="altura">1.80</td>
<td class="resultado-imc"></td>
</tr>
<tr class="paciente">
<td>Fernando</td>
<td>33</td>
<td class="peso">100.800</td>
<td class="altura">1.90</td>
<td class="resultado-imc"></td>
</tr>
</tbody>
</table>
<script>
function calculaImc(peso, altura) {
return peso / (altura * altura);
}
var pacientes = document.querySelectorAll(".paciente");
for (var i = 0; i < pacientes.length; i++) {
var paciente = pacientes[i];
var pacientesPeso = paciente.querySelector(".peso");
var peso = pacientesPeso.textContent;
var pacientesAltura = paciente.querySelector(".altura");
var altura = pacientesAltura.textContent;
var resultadoImc = paciente.querySelector(".resultado-imc");
}
var imc = calculaImc(peso, altura);
resultadoImc.textContent = imc;
</script>
</main>
</html>