Home Foros Foro dudas Foro de JavaScript Prompt y alert Cargan antes que el contenido

Prompt y alert Cargan antes que el contenido

Etiquetado: 

Viendo 7 entradas - de la 1 a la 7 (de un total de 7)
  • Autor
    Entradas
  • #16963

    Juan David Ariza S.
    Participante

    Muy buenos días, como dice en el título he estado siguiendo el curso de JS pero en los ejercicios donde utilizamos prompt estos cargan antes que toda la página, por ejemplo en el video 17 donde se modifican los datos de unos input, soy incapaz de ver estos cambios.

    El prompt no deja cargar ningún elemento de la página a pesar de que el script se encuentra al final del body, después de que ya haya creado la tabla y los inputs.

    Esperaba que pudieran responderme esta duda, muchas gracias.

    #18644

    CLAUDIA
    Participante

    Hola. A mí me pasa lo mismo en el video 8 (Matrices 2),

    Utilizo Chrome en Windows 10. Quisiera que alguien responda cómo solucionar el problema.

    Gracias desde ya.

    #20493

    Ushio Okasaki
    Participante

    Esto se debe a que Javascript se ejecuta independientemente del renderizado de la pagina y es posible que la pagina aun se encuentre cargando cuando el Javascript se ejecuta.

    Para solucionar el problema deben de manejar un evento del objeto window que precisamente espera hasta que todos los elementos estén cargados y ejecutar la acción que quieras.

    window.addEventListener("DOMContentLoaded", (event) => {
    // Tu codigo va aquí
    });
    

    y con esto deberías de poder ver los cambios.

    #21524

    Facundo
    Participante

    Me ocurre lo mismo. La solución de Ushio Okasaki no me ha funcionado, aunque tal vez lo esté haciendo mal: no sé si el código que hay que poner entre las llaves es el que genera la ventana emergente o el que debería mostrarse por detrás de la ventana emergente. El caso es que tengo este código (del vídeo 18 de JavaScript):

     

    <div style=”color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, ‘Courier New’, monospace; font-size: 14px; line-height: 19px; white-space: pre;”>
    <div>        <span style=”color: #808080;”><</span><span style=”color: #569cd6;”>script</span><span style=”color: #808080;”>></span></div>
    <div>            <span style=”color: #569cd6;”>var</span> <span style=”color: #9cdcfe;”>numero</span>=<span style=”color: #9cdcfe;”>Math</span>.<span style=”color: #dcdcaa;”>random</span>()*<span style=”color: #b5cea8;”>100</span>;</div>
    <div>            <span style=”color: #569cd6;”>var</span> <span style=”color: #9cdcfe;”>aleatorio</span>=<span style=”color: #9cdcfe;”>Math</span>.<span style=”color: #dcdcaa;”>round</span>(<span style=”color: #9cdcfe;”>numero</span>);</div>
    <div>            <span style=”color: #569cd6;”>var</span> <span style=”color: #9cdcfe;”>mi_num</span>=<span style=”color: #b5cea8;”>0</span>, <span style=”color: #9cdcfe;”>intentos</span>=<span style=”color: #b5cea8;”>0</span>;</div>
    <div>            <span style=”color: #9cdcfe;”>document</span>.<span style=”color: #dcdcaa;”>write</span>(<span style=”color: #9cdcfe;”>numero</span> + <span style=”color: #ce9178;”>”<br>”</span>);</div>
    <div>            <span style=”color: #9cdcfe;”>document</span>.<span style=”color: #dcdcaa;”>write</span>(<span style=”color: #9cdcfe;”>aleatorio</span>);</div>
    <div></div>
    <div>            <span style=”color: #c586c0;”>do</span>{</div>
    <div>                <span style=”color: #9cdcfe;”>mi_num</span>=<span style=”color: #dcdcaa;”>prompt</span>(<span style=”color: #ce9178;”>”Introduce un número del 0 al 100″</span>);</div>
    <div>                <span style=”color: #c586c0;”>if</span>(<span style=”color: #9cdcfe;”>mi_num</span><<span style=”color: #9cdcfe;”>aleatorio</span> && <span style=”color: #9cdcfe;”>mi_num</span>>=<span style=”color: #b5cea8;”>0</span>){</div>
    <div>                    <span style=”color: #dcdcaa;”>alert</span>(<span style=”color: #ce9178;”>”Mayor”</span>);</div>
    <div>                }<span style=”color: #c586c0;”>else</span> <span style=”color: #c586c0;”>if</span>(<span style=”color: #9cdcfe;”>mi_num</span>><span style=”color: #9cdcfe;”>aleatorio</span> && <span style=”color: #9cdcfe;”>mi_num</span><=<span style=”color: #b5cea8;”>100</span>){</div>
    <div>                    <span style=”color: #dcdcaa;”>alert</span>(<span style=”color: #ce9178;”>”Menor”</span>);</div>
    <div>                }</div>
    <div>                <span style=”color: #9cdcfe;”>intentos</span>++;</div>
    <div>            }<span style=”color: #c586c0;”>while</span> (<span style=”color: #9cdcfe;”>mi_num</span>!=<span style=”color: #9cdcfe;”>aleatorio</span>);</div>
    <div>            <span style=”color: #9cdcfe;”>document</span>.<span style=”color: #dcdcaa;”>write</span>(<span style=”color: #ce9178;”>”<br><br>¡¡Has acertado el número en “</span> + <span style=”color: #9cdcfe;”>intentos</span> + <span style=”color: #ce9178;”>” intentos!!”</span>);</div>
    <div>        <span style=”color: #808080;”></</span><span style=”color: #569cd6;”>script</span><span style=”color: #808080;”>></span></div>
    </div>

    Y, tanto metiendo en las llaves del addEventListener el bucle do-while como metiendo ahí los dos document.write que le preceden, la página se me queda en blanco mientras me aparecen las ventanas emergentes.

    Agradecería mucho una solución porque imagino que saber hacer esto será de utilidad en futuros vídeos.

    Por cierto, lo he probado tanto en Chrome como en Edge.

    #21525

    Facundo
    Participante

    Pongo de nuevo el código, que lo metí en una cita y no sé por qué salió así (y no me deja editarlo):

     
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”><script></span></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> var numero=Math.random()*100;</span></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> var aleatorio=Math.round(numero);</span></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> var mi_num=0, intentos=0;</span></p>
    <p class=”selectable-text copyable-text”></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> document.write(numero + “<br>”);</span></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> document.write(aleatorio);</span></p>
    <p class=”selectable-text copyable-text”></p>
    <p class=”selectable-text copyable-text”></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> do{</span></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> mi_num=prompt(“Introduce un número del 0 al 100″);</span></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> if(mi_num<aleatorio && mi_num>=0){</span></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> alert(“Mayor”);</span></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> }else if(mi_num>aleatorio && mi_num<=100){</span></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> alert(“Menor”);</span></p>
    <p class=”selectable-text copyable-text”><span class=”selectable-text copyable-text”> }</span></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> intentos++;</span></p>
    <p class=”selectable-text copyable-text”></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> }while (mi_num!=aleatorio);</span></p>
    <p class=”selectable-text copyable-text”></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> document.write(“<br><br>¡¡Has acertado el número en ” + intentos + ” intentos!!”);</span></p>
    <p class=”selectable-text copyable-text”></p>
    <p class=”selectable-text copyable-text” dir=”ltr”><span class=”selectable-text copyable-text”> </script></span></p>

    #21526

    Facundo
    Participante

    Lo siento de nuevo. No sé por qué aparece así el código. No voy a volver a intentarlo porque no me deja ni editar ni eliminar los mensajes, si alguien me dice cómo puedo compartir el código sin que aparezca así, se lo agradezco también!

    #21894

    Pablo Aparicio
    Participante

    Ve a la pestaña html y utiliza las etiquetas del texto preformateado:

    todo el código que quieras
    

    por si no me sale al dar a enviar, la etiqueta es pre. Te saldrá como a Ushio.

Viendo 7 entradas - de la 1 a la 7 (de un total de 7)
  • Debes estar registrado para responder a este debate.