[Duda] ¿Como hacer para obtener los valores de varios input ? | Lógica de programación: Conceptos primordiales

Solucionado (ver solución)

Solucionado
(ver solución)

2
respuestas

por Estudiante

| 33.7k xp | 8 posts

Mi codigo es el siguiente:

<!DOCTYPE html>

<head>

    <html lang="es">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Calculando IMC</title>

</head>

<body>

<h1>Calculo de IMC</h1>

<label for="weight">Peso</label>
<input type="tel" id="weight" name="weight">
<br>
<label for="height">Altura</label>
<input type="tel" id="height" name="height">
<br>
<button>Calcular IMC</button>

</body>

</html>

<script>

    var button= document.querySelector("button");
    var    weight= document.querySelector("weight");
    var height= document.querySelector("height");

    function print(text) {
        document.write(text)
    }

    function calculateIMC(weight,height) {

        imc = (weight / (height* height));
        print("Tu IMC calculado es: " + imc + "<br>");

        if (imc < 18.5) {

            print("<br><br>");
            print("Tu peso es bajo. Consulta a un especialista.");

        }

        if (imc >=18.5 && imc <25) {

            print("<br><br>");
            print("Tu peso es normal.");

        }

        else {

        print("<br><br>");
        print("Tu peso es alto. Consulta a un especialista.");

        }
    }

    button.onclick = calculateIMC;

</script>

Intenté actualizar las variables con .value pero de ninguna forma sirve, al ejecutar en Chrome me sale lo siguiente:

Uncaught TypeError: Cannot read properties of null (reading 'value').

2 respuestas

por Estudiante

| 33.7k xp | 8 posts

17/04/2023

Ya pude resolverlo ahora la situacion es con un reload, ya que al activar el primer botón se actualiza rapidamente.

<!DOCTYPE html>

<head>

    <html lang="es">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Calculando IMC</title>

</head>

<body>

<h1>Calculo de IMC</h1>

<label for="weight">Peso</label>
<input id="weight" name="weight"/>
<br>
<label for="height">Altura</label>
<input id="height" name="height"/>
<br>
<button>Calcular IMC</button>

<script>

    var button= document.querySelector("button");


    function print(text) {

        document.write(text);

    }

    function calculateIMC(weight,height) {

        var    weight= document.querySelector("#weight").value;
        var height= document.querySelector("#height").value;


            function calculatedIMC(){

                print("Tu IMC calculado es: " + Math.round(imc) + "<br>");
                print("<br><br>");
                return calculatedIMC;
            }

            function refreshButton(){

                var button = document.querySelector("button");
                print("<br><br>");
                print("<button>Regresar</button>")

                return refreshButton;

            }

        imc = (weight / (height* height));

        print("<h1>Calculo de IMC</h1>");

        if (imc < 18.5) {

            calculatedIMC();
            print("Tu peso es bajo. Consulta a un especialista.");
            refreshButton();
            button.onclick = window.location.reload(true);

        }

        if (imc >=18.5 && imc <25) {

            calculatedIMC();
            print("Tu peso es normal.");
            refreshButton();
            button.onclick = window.location.reload(true);

        }        

        if (imc >= 25) {

            calculatedIMC();
            print("Tu peso es alto. Consulta a un especialista.");
            refreshButton();
            button.onclick = window.location.reload(true);

        }        

        else {

            print("Datos erroneos. Ingrese los datos correctos.");
            refreshButton();
            button.onclick = window.location.reload(true);

        }
    }

    button.onclick = calculateIMC;

</script>

</body>

</html>

solución!

por Estudiante

| 142.6k xp | 112 posts

17/04/2023

En tu código, veo que estás usando window.location.reload(true) para recargar la página cuando se hace clic en el botón. Sin embargo, esto puede causar una actualización rápida de la página, lo que puede hacer que sea difícil para el usuario ver los resultados antes de que la página se recargue.

Una forma de resolver esto es utilizando el método setTimeout para retrasar la recarga de la página después de mostrar los resultados. Aquí hay un ejemplo de cómo puedes hacerlo:

var button = document.querySelector("button");

function print(text) {
    document.write(text);
}

function calculateIMC(weight, height) {
    var weight = document.querySelector("#weight").value;
    var height = document.querySelector("#height").value;

    function calculatedIMC() {
        print("Tu IMC calculado es: " + Math.round(imc) + "<br>");
        print("<br><br>");
    }

    function refreshButton() {
        print("<br><br>");
        print("<button onclick='location.reload()'>Regresar</button>");
    }

    imc = weight / (height * height);

    print("<h1>Calculo de IMC</h1>");

    if (imc < 18.5) {
        calculatedIMC();
        print("Tu peso es bajo. Consulta a un especialista.");
        refreshButton();
    } else if (imc >= 18.5 && imc < 25) {
        calculatedIMC();
        print("Tu peso es normal.");
        refreshButton();
    } else if (imc >= 25) {
        calculatedIMC();
        print("Tu peso es alto. Consulta a un especialista.");
        refreshButton();
    } else {
        print("Datos erroneos. Ingrese los datos correctos.");
        refreshButton();
    }
}

button.onclick = function () {
    calculateIMC();
    setTimeout(function () {
        location.reload();
    }, 3000); // 3000 ms = 3 segundos, ajusta este valor a la cantidad de tiempo que deseas que los resultados sean visibles antes de recargar la página
};

En este ejemplo, se utiliza setTimeout para esperar 3 segundos (puedes ajustar este valor a tu preferencia) después de mostrar los resultados antes de recargar la página. Esto permitirá que el usuario vea los resultados antes de que la página se actualice. Además, se ha modificado la forma en que se realiza la recarga de la página, utilizando location.reload() en lugar de window.location.reload(true), que es una forma más estándar de hacerlo en JavaScript.

Si este post te ayudó, por favor, marca como solucionado ✓.

Tópicos relacionados

Contenidos de Alura sobre el tema