Estoy construyendo una calculadora de hidratación basal que muestra los resultados en una tabla HTML. La tabla tiene varias columnas como "Peso", "Método", "Constante", etc.
Mi problema surge cuando no hay datos para mostrar en la tabla. En ese caso, me gustaría ocultar la tabla por completo para evitar confundir a los usuarios.
He logrado crear la tabla y llenarla con datos dinámicos a través de JavaScript. Ahora, estoy buscando una forma eficiente de ocultar la tabla cuando no hay datos para llenarla. ¿Alguien puede orientarme sobre cómo puedo ocultar la tabla cuando no hay datos para mostrar? ¿Hay alguna práctica recomendada para esto?
Gracias por adelantado.
Aquí hay un fragmento de mi código HTML para la tabla:
const PESO = document.getElementById('peso');
const ERROR = document.getElementById('error');
window.addEventListener('load', () => {
const PESO = document.getElementById('peso');
PESO.focus();
});
PESO.addEventListener('input', () => {
const DATO = parseInt(PESO.value);
if (!isNaN(DATO)) {
analizarMetodo(DATO);
} else {
ERROR.style.display = 'block';
}
});
function analizarMetodo(peso) {
if (peso > 0 && peso <= 30) {
MetodoHollidaySegar(peso);
} else if (peso > 30) {
MetododeSuperficieCorporal(peso);
} else {
mostrarError();
}
}
function calcFlujo(peso) {
let flujo = 0;
if (peso <= 10) {
flujo = peso * 100;
} else if (peso <= 20) {
flujo = 1000 + (peso - 10) * 50;
} else {
flujo = 1500 + (peso - 20) * 20;
}
return flujo;
}
function MetodoHollidaySegar(peso) {
ERROR.style.display = 'none';
let flujo = Math.round(calcFlujo(peso));
let mantenimiento = Math.round(flujo / 24);
document.querySelector('tbody').innerHTML = '';
let rowHollidaySegar = document.createElement('tr');
rowHollidaySegar.innerHTML = `
<td>${peso}</td>
<td>Holliday Segar</td>
<td>No aplica</td>
<td>${flujo} cc</td>
<td>${mantenimiento} cc/hr</td>
<td>${mantenimiento * 1.5} cc/hr</td>
`;
document.querySelector('tbody').appendChild(rowHollidaySegar);
}
function MetododeSuperficieCorporal(peso) {
ERROR.style.display = 'none';
let Superficiecorporal = (((peso * 4) + 7) / (peso + 90)) * 1500;
let flujo = parseInt(Superficiecorporal);
let mantenimiento = Math.round(flujo / 24);
let Superficiecorporal2000 = (((peso * 4) + 7) / (peso + 90)) * 2000;
let flujo2000 = parseInt(Superficiecorporal2000);
let mantenimiento2000 = Math.round(flujo2000 / 24);
document.querySelector('tbody').innerHTML = '';
let row1500 = document.createElement('tr');
row1500.innerHTML = `
<td>${peso}</td>
<td>Superficie Corporal</td>
<td>1500</td>
<td>${flujo} cc</td>
<td>${mantenimiento} cc/hr</td>
<td>${mantenimiento * 1.5} cc/hr</td>
`;
document.querySelector('tbody').appendChild(row1500);
let row2000 = document.createElement('tr');
row2000.innerHTML = `
<td>${peso}</td>
<td>Superficie Corporal</td>
<td>2000</td>
<td>${flujo2000} cc</td>
<td>${mantenimiento2000} cc/hr</td>
<td>${mantenimiento2000 * 1.5} cc/hr</td>
`;
document.querySelector('tbody').appendChild(row2000);
}
function mostrarError() {
ERROR.style.display = 'block';
}
<!DOCTYPE html>
<html>
<head>
<title>Calculadora de hidratación basal</title>
<link href="style.css" rel="stylesheet" />
<script defer src="./script.js">
</script>
</head>
<body>
<div id="contenedor">
<div id="calculadora">
<div class="contenido">
<h1>
Hidratación Basal
</h1>
<p class="item">
Completa todos los datos
</p>
<input class="item" id="peso" placeholder="Peso en kg"
type="number" />
<p class="item" id="error">
* Debe completar todos los datos
</p>
</div>
</div>
<div id="detalle">
<div class="contenido">
<h1>
¿Como se calcula?
</h1>
<ul>
<li>
De 0kg a 10kg, se calcula 100cc por cada kilo.
</li>
<li>
Se suman 50cc por cada kilo de peso por arriba de
10kg, hasta 20kg
</li>
<li>
De 20kg para arriba, se suman 20cc por cada kilo
adicional
</li>
</ul>
</div>
</div>
<table>
<thead>
<tr>
<th>
Peso
</th>
<th>
Método
</th>
<th>
Constante
</th>
<th>
Volumen diario
</th>
<th>
Mantenimiento
</th>
<th>
m+m/2
</th>
</tr>
</thead>
<tbody>
<tr>
<td id="table-peso">
</td>
<td id="table-metodo">
</td>
<td id="table-constante">
</td>
<td id="table-volumen-diario">
</td>
<td id="table-mantenimiento">
</td>
<td id="table-mm2">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>