提交時的 JavaScript addEventListener 不起作用

Question

這完全是一個新手問題，但我的第一個 JavaScript 任務遇到了嚴重的問題。 我決定學習 JS 並從一個待辦事項列表開始，現在我被困在了最開始的地方。

提交表單時應觸發的事件偵聽器不起作用。 當我更改它偵聽的事件以“單擊”、“聚焦”或“模糊”時，它可以工作，但不能與提交一起使用。 任何人都可以提供建議嗎？

附注。 event.preventDefault();有沒有簡單的解釋event.preventDefault(); ? 它有什么作用，什么時候應該使用它？

太感謝了。

我的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TODO</title>

</head>
<body>
    <div id="headerDiv">
        <h1>My To Do List</h1>
        <form>
            <input aria-label="Add a new task:" type="text" id="newTaskInput" placeholder="Do the laundry, write a new chapter...">
            <input id="submitNewTaskButton" type="submit" value="+">
        </form>
    </div>
    <div id="tasks">
        <ul id="tasksList">
            <li>Do the laundry</li>
            <li>Walk the cat</li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>

我的 JavaScript：

let newTaskInputForm = document.getElementById('newTaskInput');
let tasksList = document.getElementById("tasksList");
let submitNewTaskButton = document.getElementById("submitNewTaskButton");

function submitNewTask() {
    var newTask = newTaskInputForm.value;
    var newListItem = document.createElement("li");
    var newListTextNode = document.createTextNode(newTask);
    newListItem.appendChild(newListTextNode);
    tasksList.appendChild(newListItem);
}

newTaskInputForm.addEventListener('submit', function (event) {
    event.preventDefault();
    submitNewTask(event)
});

Answer 1

<input>元素不養submit事件-這是<form>這的確是。

（換句話說，您已將偵聽器附加到錯誤的元素上）

Answer 2

submit事件只存在於form元素上。 檢查這里。

所以，它是

<html>
...
<form id="form></form>
...

<script>

let form = document.getElementById('form')

form.addEventListener('submit',function(){})

</script>
</html>

event.preventDefault()我認為最好在這里解釋一下。

歡迎使用 JavaScript。

Answer 3

此處進行了兩項更改，事件偵聽器添加到<form>而不是輸入提交，還將<input>標記更改為<button>檢查此 SO 問題以了解它們之間的區別。

對於e.preventDefault() ，基本上它用於停止默認的 HTML 標簽行為，例如<a>標簽在點擊時它們有時會將用戶重定向到不同的頁面或域，表單提交操作通常也會將頁面重定向到不同的頁面， e.preventDefault()將停止這種行為，並讓開發人員決定在表單提交或<a>錨標記被點擊后應該發生什么，什么時候應該使用它：這取決於應用程序設計，所以如果您正在處理的應用程序需要一些 HTML 標簽來表現不同，例如<a>和<form>標簽來執行Ajax調用。

 let newTaskInputForm = document.getElementById('newTaskInput'); let tasksList = document.getElementById("tasksList"); let submitNewTaskButton = document.getElementById("submitNewTaskButton"); function submitNewTask() { var newTask = newTaskInputForm.value; var newListItem = document.createElement("li"); var newListTextNode = document.createTextNode(newTask); newListItem.appendChild(newListTextNode); tasksList.appendChild(newListItem); } document.getElementById('newTaskForm').addEventListener('submit', function (event) { event.preventDefault(); submitNewTask(event) });

 <!DOCTYPE html> <html lang="en"> <head> <title>TODO</title> </head> <body> <div id="headerDiv"> <h1>My To Do List</h1> <form id="newTaskForm"> <input aria-label="Add a new task:" type="text" id="newTaskInput" placeholder="Do the laundry, write a new chapter..."> <button id="submitNewTaskButton" type="submit">+ form</button> </form> </div> <div id="tasks"> <ul id="tasksList"> <li>Do the laundry</li> <li>Walk the cat</li> </ul> </div> </body> <script type="text/javascript" src="script.js"></script> </html>

提交時的 JavaScript addEventListener 不起作用

問題描述

3 個解決方案

解決方案1
1 2020-03-06 16:12:41

解決方案2
0 2020-03-06 16:21:36

解決方案3
0 已采納 2020-03-06 16:21:54

提交時的 JavaScript addEventListener 不起作用

問題描述

3 個解決方案

解決方案1 1 2020-03-06 16:12:41

解決方案2 0 2020-03-06 16:21:36

解決方案3 0 已采納 2020-03-06 16:21:54

解決方案1
1 2020-03-06 16:12:41

解決方案2
0 2020-03-06 16:21:36

解決方案3
0 已采納 2020-03-06 16:21:54