這完全是一個新手問題，但我的第一個 JavaScript 任務遇到了嚴重的問題。我決定學習 JS，并從 TODO 列表開始，但現在我卻陷入了困境。提交表單時應觸發的事件偵聽器不起作用。當我更改事件時，它會偵聽“單擊”、“焦點”或“模糊”，它可以工作，但不能與提交一起使用。有人可以提供建議嗎？附言。有沒有簡單的解釋event.preventDefault();？它有什么作用，什么時候應該使用？太感謝了。我的HTML：<!DOCTYPE html><html><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)});
3 回答
小怪獸愛吃肉
TA貢獻1852條經驗 獲得超1個贊
這里做了兩個更改，事件偵聽器添加到而<form>不是輸入提交，還更改了<input>標記以<button>檢查。
對于e.preventDefault()，基本上它用于阻止默認的 HTML 標簽行為，例如，<a>單擊標簽時，它們有時會將用戶重定向到不同的頁面或域，而且表單提交操作通常也會將頁面重定向到不同的頁面，例如.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>
<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>
慕俠2389804
TA貢獻1719條經驗 獲得超6個贊
該submit事件僅存在于form元素上。
所以，它是
<html>
...
<form id="form></form>
...
<script>
let form = document.getElementById('form')
form.addEventListener('submit',function(){})
</script>
</html>
- 3 回答
- 0 關注
- 238 瀏覽
添加回答
舉報
0/150
提交
取消