Home > Back-end >  e.preventDefault() not working always reloads
e.preventDefault() not working always reloads

Time:02-11

I have the following code and the e.preventDefault() doesn´t work. Always recharges the page. Could it be something on my computer?

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();
});

CodePudding user response:

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>

CodePudding user response:

Solution

  • Related