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.
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í.