JavaScript AddEventListener無法正常工作

Question

我將在教程之后使用Java腳本開發一個簡單的書簽應用程序，因為我是javascript的初學者。 我使用custom.js文件將javascript代碼分開保存，並將其鏈接到代碼底部。 我使用addEventListener進行表單提交，並使用console.log查看輸出以檢查其結果。 但這並沒有給我任何錯誤，也無法正常運行addEventListener 。 因為它沒有給出錯誤消息，所以我的代碼找不到問題。如果有人可以幫助我，我非常感謝您的幫助。 謝謝 。 我有index.html和custom.js文件。

 document.getElementById('myform').addEventListener('submit', saveBookmark); //function saveBookmark function saveBookmark(e) { console.log('Works'); e.preventDefault(); } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <main role="main" class="container" id="mainc"> <div class="jumbotron"> <h1 id="titlehead">App</h1> <!-- Form --> <form id="myform"> <!--form field to input name--> <div class="form-group"> <label>Site Name</label> <input type="text" name="sitename" class="form-control" placeholder="Website Name"> </div> <!--form field to input url--> <div class="form-group"> <label>Site URL</label> <input type="text" name="siteurl" class="form-control" placeholder="Website URL"> </div> <input type="button" name="submit" class="btn btn-primary" value="SUBMIT"> </form> <!-- Eof Form --> </div> </main> 

Answer 1

由於您嘗試附加功能以提交事件，並且您的按鈕類型為button ，因此該事件未觸發。 更改為提交 ：

<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT">

 // Event for form Submission document.getElementById('myform').addEventListener('submit', saveBookmark); //function saveBookmark function saveBookmark(e) { console.log('Works'); e.preventDefault(); } 

 <main role="main" class="container" id="mainc"> <div class="jumbotron"> <h1 id="titlehead">App</h1> <!-- Form --> <form id="myform"> <!--form field to input name--> <div class="form-group"> <label>Site Name</label> <input type="text" name="sitename" class="form-control" placeholder="Website Name"> </div> <!--form field to input url--> <div class="form-group"> <label>Site URL</label> <input type="text" name="siteurl" class="form-control" placeholder="Website URL"> </div> <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"> </form> <!-- Eof Form --> </div> </main> 

Answer 2

您的輸入類型是Button，將類型設為Submit :)

 // Event for form Submission document.getElementById('myform').addEventListener('submit',function saveBookmark(e){ console.log('Works'); e.preventDefault(); }); 

 <main role="main" class="container" id="mainc"> <div class="jumbotron"> <h1 id="titlehead">App</h1> <!-- Form --> <form id="myform"> <!--form field to input name--> <div class="form-group"> <label>Site Name</label> <input type="text" name="sitename" class="form-control" placeholder="Website Name"> </div> <!--form field to input url--> <div class="form-group"> <label>Site URL</label> <input type="text" name="siteurl" class="form-control" placeholder="Website URL"> </div> <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"> </form> <!-- Eof Form --> </div> </main> 

Answer 3

您的輸入類型必須為type=submit ，

在此處閱讀更多信息： https : //javascript.info/forms-submit

 var ele = document.getElementById('myform'); if(ele.addEventListener){ ele.addEventListener("submit", saveBookmark, false); } //function saveBookmark function saveBookmark(e) { console.log('Works'); e.preventDefault(); } 

 <main role="main" class="container" id="mainc"> <div class="jumbotron"> <h1 id="titlehead">App</h1> <!-- Form --> <form id="myform"> <!--form field to input name--> <div class="form-group"> <label>Site Name</label> <input type="text" name="sitename" class="form-control" placeholder="Website Name"> </div> <!--form field to input url--> <div class="form-group"> <label>Site URL</label> <input type="text" name="siteurl" class="form-control" placeholder="Website URL"> </div> <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"> </form> <!-- Eof Form --> </div> </main> 

Answer 4

嘗試這個：

// Event for form Submission
document.getElementById('myform').addEventListener('submit', function saveBookmark(e) {
    e.preventDefault();
    console.log('Works');
});