Tengo el siguiente código y e.preventDefault() no funciona. Siempre recarga la página. ¿Podría ser algo en mi computadora?
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> </title> </head> <body> <script>src="app.js"</script> <form id="tweetForm"> <input type="text" name="username" placeholder="username"> <input type="text" name="tweet" placeholder="tweet"> <button>Post</button> </form> </body> </html>JavaScript:
const tweetForm = document.querySelector("#tweetForm") tweetForm.addEventListener('submit', function (e) { console.log("SUBMIT!!") e.preventDefault(); }); const tweetForm = document.querySelector("#tweetForm") tweetForm.addEventListener('submit', function (e) { console.log("SUBMIT!!") e.preventDefault(); }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> </title> </head> <body> <!-- MOVE YOUR SCRIPT TO BOTTOM, JUST BEFORE CLOSE BODY TAG --> <!-- <script src="app.js"></script> --> <form id="tweetForm"> <input type="text" name="username" placeholder="username"> <input type="text" name="tweet" placeholder="tweet"> <button>Post</button> </form> <!-- HERE IS GOOD, WITHOUT COMMENT NOTATION --> <!-- <script src="app.js"></script> --> </body> </html>Solución 🎈
En primer lugar, corrija <script>src="app.js"</script> . El atributo src debe estar dentro de la etiqueta. Entonces pruebe una de estas soluciones:
Coloque la etiqueta del script después de todos los elementos del cuerpo.
O agregue el atributo defer a la etiqueta del script: <script src="/app.js" defer></script> .
O coloca tu código dentro de la devolución de llamada del evento DOMContentLoaded :
document.addEventListener('DOMContentLoaded', () => { const tweetForm = document.querySelector('#tweetForm') tweetForm.addEventListener('submit', e => { console.log('SUBMIT!!') e.preventDefault() }) }, false)