按下提交時，我的preventDefault不起作用

我目前正在努力學習不同的 Javascript 功能。我正在使用 preventDefault。我試圖在我正在制作的網站上練習，但它仍在重繪 頁面。我究竟做錯了什么？

這是我的代碼：

formSubmit.addEventListener('click', function(event) {
  event.preventDefault();
});

<form role="form">
  <label for="fname" class="labelI">First Name:</label> <br>
  <input type="text" name="fName" id="fname" required> <br>
  <label for="lName" class="labelI"></label>Last Name:</label> <br>
  <input type="text" name="lName" id="lName" required> <br>
  <label for="emailA" class="labelI"></label>Email Address:</label> <br>
  <input type="email" name="Email" id="emailA" required><br>
  <label for="password" class="labelI"></label>Password</label> <br>
  <input type="password" name="password" id="password" minlength="5" maxlength="12"> <br>
  <input type="submit" value="Submit" class="but" id="formSubmit">
  <input type="reset" value="Clear" class="but">
</form>

uj5u.com熱心網友回復：

您需要選擇帶有 id 的按鈕formSubmit。

var sel = document.getElementById("formSubmit");
sel.addEventListener('click',function(e){
    e.preventDefault();
});

您不能將事件偵聽器直接添加到 id 'formSubmit'

uj5u.com熱心網友回復：

為您的表單添加一個 id 讓我們說 id="form1" 并添加以下代碼：

var myform = document.getElementById("form1"); myfom.addEventListener('submit',function(e){e.preventDefault();});

<form role="form" id="form1">
 <label for="fname" class="labelI">First Name:</label> <br>
 <input type="text" name="fName" id="fname" required> <br>
 <label for="lName" class="labelI"></label>Last Name:</label> <br>
 <input type="text" name="lName" id="lName" required> <br>
 <label for="emailA" class="labelI"></label>Email Address:</label> <br>
 <input type="email" name="Email" id="emailA" required><br>
 <label for="password" class="labelI"></label>Password</label> <br>
 <input type="password" name="password" id="password" minlength="5" 
  maxlength="12"> <br>
 <input type="submit" value="Submit" class="but" id="formSubmit">
 <input type="reset" value="Clear" class="but">
</form>

uj5u.com熱心網友回復：

formSubmit 不是變數。您必須獲取對元素的參考。

document.getElementById('formSubmit').addEventListener('click', function (event) {
    event.preventDefault();
});

uj5u.com熱心網友回復：

將類“表單”添加到表單元素作為參考元素。你也不應該說我使用了 es6 語法。

const form = document.querySelector('.form');
form.addEventListener('submit', (e) => e.preventDefault());

<form class="form" role="form">
  <label for="fname" class="labelI">First Name:</label> <br>
  <input type="text" name="fName" id="fname" required> <br>
  <label for="lName" class="labelI"></label>Last Name:</label> <br>
  <input type="text" name="lName" id="lName" required> <br>
  <label for="emailA" class="labelI"></label>Email Address:</label> <br>
  <input type="email" name="Email" id="emailA" required><br>
  <label for="password" class="labelI"></label>Password</label> <br>
  <input type="password" name="password" id="password" minlength="5" maxlength="12"> <br>
  <input type="submit" value="Submit" class="but" id="formSubmit">
  <input type="reset" value="Clear" class="but">
</form>

標籤：javascript html 防止默认

上一篇：JavaScript匯入在不同或相同的檔案中不起作用

下一篇：訪問html::shadowDOM元素