Olá, ja quebrei a cabeça demais nao to conseguindo identificar o que está acontecendo. Se os senhores podem me dar uma luz, serei eternamente grato :)
O POBREMA
O problema é que quando eu clico no botao Calcular ele rapidamente preenche a coluna dos IMCs e em seguida apaga todos os valores da coluna IMCs. OBS: isso acontece em milesimos de segundos.
Quem puder ajudar, ja agradeço :)
O codigo
calcula-imc.js
var botao = document.getElementById("calcula-imcs");
botao.addEventListener("click", function() {
var trPacientes = document.getElementsByClassName("paciente");
percorreArray(trPacientes,function(trPaciente){
var tdNome = trPaciente.getElementsByClassName("info-nome")[0];
var tdPeso = trPaciente.getElementsByClassName("info-peso")[0];
var tdAltura = trPaciente.getElementsByClassName("info-altura")[0];
var paciente = {
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.log("Divisao por 0 :/");
}
}
}
var resultado = paciente.pegaImc();
var tdImc = trPaciente.getElementsByClassName("info-imc")[0];
tdImc.textContent = resultado;
});
});imprime-nome.js
var trPacientes = document.getElementsByClassName("paciente");
percorreArray(trPacientes,function(trPaciente) {
var tdNome = trPaciente.getElementsByClassName("info-nome")[0];
console.log(tdNome.textContent);
});percorre.js
function percorreArray(trPacientes, comportamento){
var contador = 1;
while(contador <= trPacientes.length-1){
var pacienteTrAtual = trPacientes[contador];
comportamento(pacienteTrAtual);
contador++;
}
}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>Painel de controle - 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-imc" id="imc-1"></td>
</tr>
<tr class="paciente">
<td class="info-nome">Paulo</td>
<td class="info-peso" >100</td>
<td class="info-altura" >2.00</td>
<td class="info-imc"></td>
</tr>
<tr class="paciente">
<td class="info-nome">Boney M.</td>
<td class="info-peso" >40</td>
<td class="info-altura" >1.70</td>
<td class="info-imc"></td>
</tr>
<tr class="paciente">
<td class="info-nome">Alessandra</td>
<td class="info-peso" >90</td>
<td class="info-altura" >1.60</td>
<td class="info-imc"></td>
</tr>
<tr class="paciente">
<td class="info-nome">RenaN</td>
<td class="info-peso" >81</td>
<td class="info-altura" >1.74</td>
<td class="info-imc"></td>
</tr>
<tr class="paciente">
<td class="info-nome">Jhones</td>
<td class="info-peso" >20</td>
<td class="info-altura" >1.30</td>
<td class="info-imc"></td>
</tr>
<tr class="paciente">
<td class="info-nome">Cristina</td>
<td class="info-peso" >72</td>
<td class="info-altura" >0</td>
<td class="info-imc"></td>
</tr>
<tr class="paciente">
<td class="info-nome">Victor Gayzao</td>
<td class="info-peso" >71</td>
<td class="info-altura" >1.73</td>
<td class="info-imc"></td>
</tr>
</table>
<form>
<button id="calcula-imcs" class="botao">Calcular</button>
</form>
</section>
<section>
<h2>Adicionar</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>
<hr>
<br/>
</section>
</main>
<script src="percorre.js"></script>
<script src="calcula-imc.js"></script>
<script src="imprime-nome.js"></script>
</body>
</html>