0

Buen día tengo un problema al escribir en mi Html, estoy realizando un juego para adivinar un numero, dada la situación Javascript debería escribirme en el documento el mensaje correspondiente pero al parecer el que se ejecuta primero es el script antes que el Html, cabe recalcar que lo ubico antes de la etiqueta de cierre .

Aqui podemos ver que javascript se ejecuta antes que el html

aquí esta el código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Adivina el numero</title>
    <script>
        let numero, aleatorio;
        let intentos = 0;

        aleatorio = Math.round(Math.random()*100);
    </script>
</head>
<body>
    <script>
        
        do{
            numero = prompt("Ingresa un numero de 1 a 100");

            if((!isNaN(numero)) && (numero > 0) && (numero <= 100)){
                if(aleatorio < numero){
                    document.write("El numero es mas bajo");
                }
                else{
                    if(aleatorio == numero){
                    }
                    else{
                        document.write("El numero es mayor");
                    }
                }
                intentos++;
            }
            else{
                document.write("Debe ser un numero valido");
            }
        }while(aleatorio != numero);

        alert("Lo lograste el numero es "+aleatorio+" los intentos fueron: "+intentos);
    </script>
    
</body>
</html>

De antemano muchas gracias, estoy empezando en Javascript, lo que noto es que a pesar de que el código Javascript esta al final del html, este se carga primero lo que ocasiona que no encuentre el documento Html.

Lo he usado en Chrome y no funciona, pero en internet explorer si a que se debe esto.

4
  • El documento se lee de arriba hacia abajo, y si no hay nada que condicione la ejecucion de tu alerta esta se ejecutara cuando llegue a ese punto; tu alert() esta fuera de las condiciones de ejecucion (do... while) por tanto se puede ejecutar independiente de las condiciones.... Y que es lo que dices que no encuentra en el documento? No estas incluyendo ningun elemento en tu HTML aparte del script
    – IvanS95
    Commented el 28 mar. 2019 a las 17:31
  • En la imagen se puede ver como el script ya empezó a ejecutarse y el html no aparece, inspeccionando se puede ver. Commented el 28 mar. 2019 a las 17:48
  • 2
    Eso pasa por como se manejan los hilos, cada explorador tiene su forma de hacerlo, si pruebas tu codigo en firefox te funcionara bien. Te dejo un enlace para que le eches una leida. Why html page render document.write after prompt at end of javascript
    – dlr
    Commented el 28 mar. 2019 a las 18:07
  • 2
    Si te interesa como ejecutar tu logica despues de haber cargado tu pagina pasate por: Reemplace jQuery Ready con JavaScript simple
    – dlr
    Commented el 28 mar. 2019 a las 18:09

2 respuestas 2

1

Para modificar el contenido de una página web una vez cargada, hay que modificar el DOM (Document Object Model). Lo que sucede es que para que se modifique el DOM, el navegador primero espera a que se termine el script para luego modificarlo. prompt() detiene la ejecucion de javascript para recibir un valor. Puedes intentar de otra manera (input), como en el siguiente código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Adivina el numero</title>
    <script>
        let numero, aleatorio;
        let intentos = 0;
        aleatorio = Math.round(Math.random()*100);
        alert(aleatorio);
    </script>
</head>
<body>
        <label for="ingresanumero">Ingresa un numero de 1 a 100: </label>
        <br>
        <br>
        <input type="number" min="0" max="100" id="ingresanumero" >
        <button onclick="verificarAleatorio();" >Ingresar</button>
        <br>
        <p id="mensajes"></p>
</body>
</html>
<script type="text/javascript">
    function verificarAleatorio(){
        var numero = document.getElementById("ingresanumero").value; //obtengo el valor del input

        if((!isNaN(numero)) && (numero > 0) && (numero <= 100)){
                intentos++;
                if(aleatorio < numero){
                    document.getElementById("mensajes").innerHTML = "El numero es mas bajo"; //pones el mensaje bajo el boton
                }else if(aleatorio > numero){
                    document.getElementById("mensajes").innerHTML ="El numero es mayor";

                }else{
                    document.getElementById("mensajes").innerHTML ="Lo lograste el numero es "+aleatorio+" los intentos fueron: "+intentos;
                }
        }else{
                document.getElementById("mensajes").innerHTML = "Debe ser un numero valido";
        }
    }

 </script>
1
  • Si prompt() detiene la ejecucion porque no me carga el <label> antes de la funcion prompt. Commented el 28 mar. 2019 a las 19:12
0

Debes poner tu código luego de que se cargue la pagina, para eso puede ejecutarlo cuando se carga el documento:

document.addEventListener("load",function() {
  do{ 
    numero = prompt("Ingresa un numero de 1 a 100"); 
    if((!isNaN(numero)) && (numero > 0) && (numero <= 100)){ 
      if(aleatorio < numero){ 
        document.write("El numero es mas bajo");
      } 
      else{ 
        if(aleatorio == numero){
        } 
        else{ 
          document.write("El numero es mayor"); 
        } 
      } 
      intentos++; 
    } 
    else{ 
      document.write("Debe ser un numero valido"); 
    } 
  }
  while(aleatorio != numero);
});

Entonces luego que tu pagina se haya cargado se ejecutará tu script, para eso agregamos el evento de carga al document.

1
  • Al ponerlo dentro de la función se carga el html pero el script no funciona, debería llamarlo?, no se que pasa pero en internet explorer si funciona mi anterior codigo, en chrome no. Commented el 28 mar. 2019 a las 17:51

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.