Hola, disculpa las molestias. Me sucede que vengo bien con el código y el programa funciona sin problemas, pero a esta altura, después de crear la clase para los pacientes que se ingresan nuevos, me paso de ingresar un nuevo paciente con peso > 1000 o altura > 3 y el IMC se calcula de igual manera, y no me retorna el "Peso Incorrecto" o "Altura incorrecta". Por qué sucede esto? gracias.
Hola Wanda, como estás?
Por favor puedes compartir tu código, tando el html como el javascript, para ver que puede estar ocurriendo. Aqui te dejo un vídeo de como subir un código correctamente a nuestro foro https://www.youtube.com/watch?v=tevEdARFxGU
Si tienes alguna duda sobre el contenido de los cursos, estaremos aquí para ayudarte.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Buona Vita Nutrición</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header>
<div class="container">
<h1 class="titulo">Buona Vita Nutrición</h1>
</div>
</header>
<main>
<section class="container">
<h2>Mis pacientes</h2>
<label for="filtrar-tabla"></label>
<input type="text" name ="filtro" id="filtrar-tabla" placeholder="Digite el nombre del paciente">
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Peso(kg)</th>
<th>Altura(m)</th>
<th>Gordura Corporal(%)</th>
<th>IMC</th>
</tr>
</thead>
<tbody id="tabla-pacientes">
<tr class="paciente">
<td class="info-nombre">Pablo</td>
<td class="info-peso">100</td>
<td class="info-altura">2.00</td>
<td class="info-gordura">10</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nombre">Juan</td>
<td class="info-peso">80</td>
<td class="info-altura">1.72</td>
<td class="info-gordura">40</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nombre">Erica</td>
<td class="info-peso">54</td>
<td class="info-altura">1.64</td>
<td class="info-gordura">14</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente">
<td class="info-nombre">Diego</td>
<td class="info-peso">85</td>
<td class="info-altura">1.73</td>
<td class="info-gordura">24</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nombre">Tatiana</td>
<td class="info-peso">46</td>
<td class="info-altura">1.55</td>
<td class="info-gordura">19</td>
<td class="info-imc">0</td>
</tr>
</tbody>
</table>
</section>
</main>
<section class="container">
<h2 id="titulo-form">Adicionar nuevo paciente</h2>
<ul id="mensajes-errores"></ul>
<form id="form-adicionar">
<div class="grupo">
<label for="nombre">Nombre:</label>
<input id="nombre" name="nombre" type="text" placeholder="digite el nombre del paciente" class="campo">
</div>
<div class="grupo">
<label for="peso">Peso:</label>
<input id="peso" name="peso" type="text" placeholder="digite el peso del paciente" class="campo campo-medio">
</div>
<div class="grupo">
<label for="altura">Altura:</label>
<input id="altura" name="altura" type="text" placeholder="digite la altura del paciente" class="campo campo-medio">
</div>
<div class="grupo">
<label for="gordura">% de Gordura:</label>
<input id="gordura" type="text" placeholder="digite el porcentaje de gordura del paciente" class="campo campo-medio">
</div>
<button id="adicionar-paciente" class="boton bto-principal">Adicionar</button>
</form>
</section>
<script src="js/calculo-imc.js"> </script>
<script src="js/form.js"></script>
<script src="js/eliminar-paciente.js"></script>
<script src="js/filtrar.js"></script>
</body>
</html>
var botonAdicionar = document.querySelector("#adicionar-paciente");
botonAdicionar.addEventListener("click",function(event){
event.preventDefault();
var form = document.querySelector("#form-adicionar");
var paciente = capturarDatosPaciente(form);
var pacienteTr = construirTr(paciente);
//validar paciente
var errores = validarPaciente(paciente);
if (errores.length > 0){
exhibirMensajesErrores(errores);
return;
}
var tabla = document.querySelector("#tabla-pacientes");
tabla.appendChild(pacienteTr);
form.reset();
var mensajesErrores = document.querySelector("#mensajes-errores");
mensajesErrores.innerHTML = "";
});
function capturarDatosPaciente(form){
// Capturando los Datos del Formulario
var paciente = {
nombre: form.nombre.value,
peso: form.peso.value,
altura: form.altura.value,
gordura: form.gordura.value,
imc: calcularIMC(form.peso.value,form.altura.value)
}
return paciente;
}
function construirTr(paciente){
var pacienteTr = document.createElement("tr");
pacienteTr.classList.add("paciente");
pacienteTr.appendChild(construirTd(paciente.nombre,"info-nombre"));
pacienteTr.appendChild(construirTd(paciente.peso,"info-peso"));
pacienteTr.appendChild(construirTd(paciente.altura,"info-altura"));
pacienteTr.appendChild(construirTd(paciente.gordura,"info-gordura"));
pacienteTr.appendChild(construirTd(paciente.imc,"info-imc"));
return pacienteTr;
}
function construirTd(dato,clase){
var td = document.createElement("td");
td.classList.add("clase");
td.textContent = dato;
return td;
}
function validarPaciente(paciente){
var errores = []
if (paciente.nombre.length == 0){
errores.push("El nombre no puede estar vacío");
}
if (paciente.peso.length == 0){
errores.push("El peso no puede estar vacío");
}
if (paciente.altura.length == 0){
errores.push("La altura no puede estar vacía");
}
if (paciente.gordura.length == 0){
errores.push("El porcentaje de gordura no puede estar vacío");
}
if (!validarPeso(paciente.peso)){
errores.push("El Peso es Inconrrecto");
}
if (!validarAltura(paciente.altura)){
errores.push("La Altura es Inconrrecta");
}
return errores;
}
function exhibirMensajesErrores(errores){
var ul = document.querySelector("#mensajes-errores")
ul.innerHTML = ""
errores.forEach(function(error){
var li = document.createElement("li")
li.textContent = error;
ul.appendChild(li);
});
}var campoFiltro = document.querySelector("#filtrar-tabla");
campoFiltro.addEventListener("input",function(){
var pacientes = document.querySelectorAll(".paciente");
if(this.value.length > 0){
for (var i = 0 ; i < pacientes.length; i++){
var paciente = pacientes[i];
var tdNombre = paciente.querySelector(".info-nombre");
var nombre = tdNombre.textContent;
var expresion = new RegExp(this.value, "i");
if(!expresion.test(nombre)){
paciente.classList.add("invisible");
} else {
paciente.classList.remove("invisible");
}
}
}else{
for (var i = 0 ; i < pacientes.length; i++){
var paciente = pacientes[i];
paciente.classList.remove("invisible");
}
}
});var pacientes = document.querySelectorAll(".paciente");
for (var i = 0; i< pacientes.length; i++){
var paciente = pacientes[i];
var tdPeso = paciente.querySelector(".info-peso");
var peso = tdPeso.textContent;
var tdAltura = paciente.querySelector(".info-altura");
var altura = tdAltura.textContent;
var tdIMC = paciente.querySelector(".info-imc");
pesoEsValido = validarPeso(peso);
alturaEsValida = validarAltura(altura);
if (!pesoEsValido) {
console.log("Peso Incorrecto");
tdIMC.textContent = "Peso Incorrecto";
pesoEsValido = false;
paciente.classList.add("paciente-incorrecto");
}
if (!alturaEsValida) {
console.log("Altura Incorrecta");
tdIMC.textContent = "Altura Incorrecta";
alturaEsValida = false;
paciente.classList.add("paciente-incorrecto");
}
if (pesoEsValido && alturaEsValida){
tdIMC.textContent = calcularIMC(peso,altura);
}
}
function calcularIMC(peso,altura) {
var imc = peso / (altura * altura);
return imc.toFixed(2);
}
function validarPeso(peso){
if (peso >= 0 && peso < 1000){
return true;
} else{
return false
}
}
function validarAltura(altura){
if (altura >= 0 && altura < 3) {
return true;
}else{
return false;
}
}