这完全是一个新手问题，但我的第一个 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 关注
- 108 浏览
添加回答
举报
0/150
提交
取消