0

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>

1 respuesta 1

0

Para que se oculte la tabla cada vez que el input esté vacío, puedes hacer lo mismo que haces para enseñar el mensaje de error, pero de la forma contraria, para que cuando no haya nada que mostrar la tabla se esconda.

Lo primero que tendrás que hacer será ponerle un id a tu tabla, para que de esta forma puedas acceder a ella mediante JavaScript

<table id="miTabla">

Luego bastará con que le hagas referencia de la misma forma que haces para mostrar el mensaje de error, y ponerlo en todos los sitios donde ocultas y muestras el mensaje de error.

const PESO = document.getElementById('peso');
    const ERROR = document.getElementById('error');
    const TABLA = document.getElementById('miTabla');

    window.addEventListener('load', () => {
        const PESO = document.getElementById('peso');
        PESO.focus();
    });

    PESO.addEventListener('input', () => {
        const DATO = parseInt(PESO.value);
        if (!isNaN(DATO)) {
            analizarMetodo(DATO);
        } else {
            TABLA.style.display = 'none';
            ERROR.style.display = 'block';
        }
    });


    function analizarMetodo(peso) {
        if (peso > 0 && peso <= 30) {
            MetodoHollidaySegar(peso);
        } else if (peso > 30) {
            MetododeSuperficieCorporal(peso);
        } else {
            mostrarError();
            ocultarTabla();
        }
    }

    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';
        TABLA.style.display = 'block';

        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';
        TABLA.style.display = 'block';
        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 ocultarTabla() {
        TABLA.style.display = 'block';
    }

    function mostrarError() {
        ERROR.style.display = 'none';

    }
<!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 id="miTabla">
            <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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.