Solo quiero preguntar sobre el código HTML, ¿por qué cuando hago clic, Hello world solo aparece pero no permanece en mi pantalla?
<!DOCTYPE HTML> <html lang="en"> <head> <link href="style.css" rel="stylesheet"> <title> Hello world</title> </head> <body> <!-- Create a button that when click alert to the screen Hello World--> <form> <button id="myBtn">Click here</button> </form> <p id="hi"></p> <script> let body = document.querySelector('body'); document.getElementById('myBtn').addEventListener('click', function() { body.style.backgroundColor = 'red'; }); </script> </body> </html>Intuitivamente, el tipo implícito de una etiqueta <button> es submit , no button . Entonces, cuando tiene un elemento <button> sin un atributo de type dentro de un elemento <form> , hará que se envíe ese formulario. En este caso, su formulario carece de un atributo de action , por lo que se enviará de forma predeterminada a la página en la que se encuentra actualmente, lo que hará que su página se vuelva a cargar.
En este caso, el problema se resuelve fácilmente eliminando la etiqueta <form> , ya que no es necesaria por ningún otro motivo. Pero, de manera más general, recomendaría agregar un atributo type="button" en cualquier elemento <button> que no esté diseñado para enviar un formulario.
Incluso si sabe que en algunos casos su botón no está dentro de un formulario, es un hábito útil para adquirirlo. En algunos proyectos grandes, es posible que esté escribiendo fragmentos aislados de HTML que se insertarán en varios contextos, por lo que type="button" puede evitar que se produzcan errores si crea un botón de forma aislada que luego se inserta en un formulario por algún motivo.
Para completar, también tiene la opción de capturar el evento de envío como el primer argumento de su controlador de eventos y evitar su acción predeterminada con el método preventDefault :
<!DOCTYPE HTML> <html lang="en"> <head> <link href="style.css" rel="stylesheet"> <title> Hello world</title> </head> <body> <!-- Create a button that when click alert to the screen Hello World--> <form> <button id="myBtn">Click here</button> </form> <p id="hi"></p> <script> let body = document.querySelector('body'); document.getElementById('myBtn').addEventListener('click', function(e) { e.preventDefault(); body.style.backgroundColor = 'red'; }); </script> </body> </html>Esto evitaría la acción predeterminada del evento de envío, por lo que la página no se volvería a cargar aunque hiciera clic en un botón de envío. Pero debido a que el elemento de formulario en este caso no es necesario por ningún otro motivo, tiene más sentido simplemente eliminarlo.