Estoy tratando de actualizar una página cada vez que un usuario hace clic en el botón para que la página vuelva al código fuente. pero location.reload() se ejecuta después del código, y no al principio.
btn.addEventListener("click", () => { location.reload() //code... }¿Por qué no recarga la página inmediatamente cuando se hace clic en el botón, sino solo cuando finaliza la función?
¿Hay otra forma de volver a configurar la página en el código fuente?
¿Por qué no vuelve a cargar la página inmediatamente cuando se hace clic en el botón, sino solo cuando finaliza la función?
Porque JavaScript bloquea la navegación.
Si no fuera así, la página se volvería a cargar y el resto de la función no se ejecutaría en absoluto (porque la página en la que se estaba ejecutando se destruyó y en su lugar se cargó una nueva versión).
Si desea que la página se vuelva a cargar y luego se ejecute una función en la nueva página, debe pasar la instrucción para ejecutar esa función a la página recién recargada (por ejemplo, a través de sessionStorage).
Cuando la página se carga (por ejemplo, espere un evento DOMContentLoaded), verifique la instrucción, actúe en consecuencia si es necesario, luego elimine la instrucción para que no se active automáticamente la próxima vez que la página se cargue desde otro mecanismo).
Esto aquí parece funcionar, pero tendría que implementarlo de manera que btnClicked no siempre sea verdadero para ejecutar el otro código. Envolviéndolo alrededor del si para verificar 'verdadero'. Luego recarga la página sin ir al resto. Establecer btnClicked en falso ejecutará el código else sin recargar la página.
¡Espero que esto pueda darte una idea!
<!DOCTYPE html> <html> <body> <button class="btn" >Click to reload page</button> <p class="text">Original Text</p> <script> const btn = document.querySelector('.btn'); const text = document.querySelector('.text'); btn.addEventListener("click", () => { var btnClicked = true if(btnClicked == true){ location.reload() } else { text.innerHTML = 'New Text'; } }) </script> </body> </html>