Prompt y alert Cargan antes que el contenido

[Juan David Ariza S.]

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.

[CLAUDIA]

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.

[Ushio Okasaki]

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.

[Facundo]

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.

[Facundo]

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>

[Facundo]

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!

[Pablo Aparicio]

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.

[Renato Visintini]

Ninguna de las respuestas me ha solucionado el problema. Estoy en el video 8.

[Autor]

Entradas