1

Dado el siguiente código, el cual pretende ser un minijuego sobre acertar un número en un rango determinado de cero a equis con un número determinado de intentos:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 3</title>
</head>

<body>
    
    <table width="25%" border="0">
        <tr>
            <td>
                <label for="textfield_1">Orientación:</label>
                <input type="text" name="textfield_1" id="mensaje" />
            </td>
            <td>
                <label for="textfield_2">Intentos restantes:</label>
                <input type="text" name="textfield_2" id="intentos" />
            </td>
        </tr>
    </table>
    
    <script>

        var max = prompt("Introduzca el número máximo que desea para el rango de búsqueda");
        var num1 = Math.round(Math.random()*max); //Número objetivo
        var num2; //Número del usuario
        var count = prompt("¿Cuántos intentos desea tener?");
        var mensaje = document.getElementById("mensaje");
        var intentos = document.getElementById("intentos");

        do{
            num2 = prompt("Introduzca un número");

            if(num1 < num2) mensaje.value="Más bajo";
            if(num1 > num2) mensaje.value="Más alto";
            if(num1 == num2) mensaje.value="¡ACERTASTE!";

            count--;
            intentos.value = count;
        }while(num1 != num2 && count != 0);

        if(num1 != num2) mensaje.value="Sin intentos: otra vez será";

    </script>
    
</body>
</html>

Se puede apreciar que la tabla está antes que el script, pero esta no se muestra en la página hasta que el script ha finalizado. De esta manera, priva al jugador de la información de orientación e intentos.

Según tengo entendido, la lectura del código es lineal, lo que implica que debería aparecer la tabla antes que el script y esta debería ir actualizándose a medida que se juega cada ronda.

Así pues, ¿en qué me he equivocado? Gracias.

1
  • La tabla sí se muestra antes, pero en el script tienes algunos prompt que saltan inmediatamente por lo que tienes la impresión de que el script ocurre primero, pero no es así. Sea como sea, siempre conviene poner el código Javascript que va a interactuar con elementos del DOM dentro de un listener DOMContentLoaded. Y, si quieres que el lanzamiento de los prompt no ocurra como ahora, lánzalos desde una acción, como pulsar un botón o algo así.
    – A. Cedano
    Commented el 15 ago. 2021 a las 0:55

1 respuesta 1

1

La tabla sí se muestra antes, pero en el script tienes algunos prompt que saltan inmediatamente por lo que tienes la impresión de que el script ocurre primero, pero no es así.

Sea como sea, siempre conviene poner el código Javascript que va a interactuar con elementos del DOM dentro de un listener DOMContentLoaded, el cual te asegurará de que el DOM esté cargado antes de que el código Javascript intente usar algunos de sus componentes.

Y, si quieres que el lanzamiento de los prompt no ocurra como ahora, lánzalos desde una acción, como pulsar un botón o algo así.

De todos modos, para demostrarte que no miento, voy a agregar como prueba un td con un valor 2 y lo voy a mostrar en el prompt. Verás que el valor 2 se muestra, signo de que la tabla está cargada cuando el prompt ocurre.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 3</title>
</head>

<body>
    
    <table width="25%" border="0">
        <tr>
            <td>
                <label for="textfield_1">Orientación:</label>
                <input type="text" name="textfield_1" id="mensaje" />
            </td>
            <td>
                <label for="textfield_2">Intentos restantes:</label>
                <input type="text" name="textfield_2" id="intentos" />
            </td>
            <td id="test">2</td>
        </tr>
    </table>
    
    <script>
document.addEventListener('DOMContentLoaded', (event) => {

        var tdTest=document.getElementById('test');
        var max = prompt("Introduzca el número máximo que desea para el rango de búsqueda"+" Variable de prueba: "+tdTest.textContent);
        var num1 = Math.round(Math.random()*max); //Número objetivo
        var num2; //Número del usuario
        var count = prompt("¿Cuántos intentos desea tener?");
        var mensaje = document.getElementById("mensaje");
        var intentos = document.getElementById("intentos");

        do{
            num2 = prompt("Introduzca un número");

            if(num1 < num2) mensaje.value="Más bajo";
            if(num1 > num2) mensaje.value="Más alto";
            if(num1 == num2) mensaje.value="¡ACERTASTE!";

            count--;
            intentos.value = count;
        }while(num1 != num2 && count != 0);

        if(num1 != num2) mensaje.value="Sin intentos: otra vez será";
});

    </script>
    
</body>
</html>

2
  • Agradezco su respuesta, pero el problema persiste: no se muestra la tabla hasta que todos los prompt han finalizado. Lo suyo sería ver la tabla durante la ejecución de todos los prompt, en la cual debería poder leer la información de cada ronda. Los prompt solo deberían actualizar la tabla con cada ronda, no ocultarla hasta el final. Commented el 15 ago. 2021 a las 19:20
  • 1
    @SergioDuránVega los prompt tienen prioridad en cuanto a la visualización, o sea, se ven por encima de la tabla. Eso no lo puedes cambiar. Quizá necesites otra forma de recoger los datos, por ejemplo elementos input
    – A. Cedano
    Commented el 15 ago. 2021 a las 23:42

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.