提交时的 JavaScript addEventListener 不起作用
[英]JavaScript addEventListener on submit not working
问题描述
it's a total newbie question, but I'm having serious issues with my first JavaScript task.
这完全是一个新手问题，但我的第一个 JavaScript 任务遇到了严重的问题。 I've decided to learn JS and start with a TODO List, and I'm now stuck at the very beginning.我决定学习 JS 并从一个待办事项列表开始，现在我被困在了最开始的地方。
The event listener that should trigger when the form is submitted doesn't work.提交表单时应触发的事件侦听器不起作用。 When I change the event it listens for to "click", "focus" or "blur" it works, but not with submit.当我更改它侦听的事件以“单击”、“聚焦”或“模糊”时，它可以工作，但不能与提交一起使用。 Can anyone be of advise?任何人都可以提供建议吗？
PS.附注。 Is there a simple explanation for event.preventDefault(); event.preventDefault();有没有简单的解释event.preventDefault(); ? ? What does it do, and when it should be used?它有什么作用，什么时候应该使用它？
Thanks a million.太感谢了。
My HTML:我的 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>
My JavaScript:我的 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 个解决方案
解决方案1
1 2020-03-06 16:12:41
解决方案2
0 2020-03-06 16:21:36
The submit event only exist on form element. submit事件只存在于form元素上。 Check here .检查这里。
so, it is所以，它是
<html>
...
<form id="form></form>
...
<script>
let form = document.getElementById('form')
form.addEventListener('submit',function(){})
</script>
</html>
The event.preventDefault() I think it is best explained here . event.preventDefault()我认为最好在这里解释一下。
Welcome to Javascript.欢迎使用 JavaScript。
解决方案3
0 已采纳 2020-03-06 16:21:54
Two changes made here, the event listener add to the <form> not the input submit, also changed the <input> tag to <button> check this SO question to know the difference between them.此处进行了两项更改，事件侦听器添加到<form>而不是输入提交，还将<input>标记更改为<button>检查此 SO 问题以了解它们之间的区别。
And for e.preventDefault() , basically its used to stop default HTML tags behavior, for example <a> tag when clicked they will redirect users to a different page or domain sometimes, also forms submit actions usually redirect the page too to a different page, e.preventDefault() will stop this behavior and let the developer decide what should happen after the form submit, or <a> anchor tag is clicked, when should it be used: this is up to the app design, so if the application you are working on require some HTML tags to behave differntly eg <a> and <form> tags to do Ajax calls.对于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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.