每次我使用 javascript 提交表单时，我的 LI 都会重复
[英]My LI are duplicating every time I submit my form with javascript
问题描述
My initial post was set to put put the minimal code I could.
我最初的帖子设置为放置我可以使用的最少代码。 It looks like I needed more of my code for this example to work.看起来我需要更多代码才能使这个示例正常工作。 This time I have added all of the code in hope that you will be able to see where I am going wrong.这次我添加了所有的代码，希望你能看到我哪里出错了。 Thank you.谢谢你。
document.querySelector('.add-task').addEventListener('click', onClick); function onClick(addTask) { var taskInput = document.getElementById('taskId'); document.querySelector('form.taskForm').addEventListener('submit', function(e) { e.preventDefault(); // create element const li = document.createElement('li'); // add classname li.className = "list-group-item d-flex justify-content-between align-items-center"; // create text node and append (*** need to change new task to form data) li.appendChild(document.createTextNode(taskInput.value)); // append li as child to ul document.querySelector('ul.list-group').appendChild(li); }) }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> <title>Task List</title> </head> <body> <!-- Header Start --> <div class="container border border-light"> <div class="row"> <div class="col-10"> <h1 class='headTaskList'>Task List</h1> <h2 class='headSub'>New Task</h2> <form class='taskForm'> <input id="taskId" class="userTaskInput form-control form-control-lg formNewTask" type="text" placeholder="Walk the dog"> <button type="submit" class="btn btn-primary add-task">Submit</button> </form> </div> </div> </div> <!-- Header Finish--> <!-- Task List Container--> <div class="container border border-light"> <div class="row"> <div class="col-10"> <h3 class='tasklistTitle'>Task List</h3> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio <span class="badge badge-primary badge-pill">X</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in <span class="badge badge-primary badge-pill">X</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus <span class="badge badge-primary badge-pill">X</span> </li> </ul> <button type="button" class="clearBtn btn btn-primary" data-toggle="button" aria-pressed="false"> Clear Task </button> </div> </div> </div> <!-- Task List Complete--> <script src="app.js"></script> </body> </html>
I am missing something here.我在这里遗漏了一些东西。 I am building a task list.我正在建立一个任务列表。 Every time I input something in the task list, it starts duplicating.每次我在任务列表中输入内容时，它都会开始复制。 For example.例如。 A BB CCC DDDD EEEEE A BB CCC DDDD EEEEE
Looking for a way to prevent this.寻找一种方法来防止这种情况。
I have added this link so you can see the issue: jsfiddle.net/#&togetherjs=4jhnVboliB我添加了这个链接，所以你可以看到问题：jsfiddle.net/#&togetherjs=4jhnVboliB
document.querySelector('.add-task').addEventListener('click', onClick); function onClick(addTask) { var taskInput = document.getElementById('taskId'); document.querySelector('form.taskForm').addEventListener('submit', function(e) { e.preventDefault(); // create element const li = document.createElement('li'); // add classname li.className = "list-group-item d-flex justify-content-between align-items-center"; // create text node and append (*** need to change new task to form data) li.appendChild(document.createTextNode(taskInput.value)); // append li as child to ul document.querySelector('ul.list-group').appendChild(li); }) }
<form class='taskForm'> <input id="taskId" class="userTaskInput form-control form-control-lg formNewTask" type="text" placeholder="Walk the dog"> <button type="submit" class="btn btn-primary add-task">Submit</button>
2 个解决方案
解决方案1
0 2020-04-06 17:53:19
You have a click handler which, every time the submit button is clicked, adds a submit handler (which adds to the list).您有一个click处理程序，每次单击提交按钮时，都会添加一个submit处理程序（添加到列表中）。
So the first time you click the submit button:所以第一次点击提交按钮时：
- The click handler adds a submit handler点击处理程序添加一个提交处理程序
- The submit handler adds the list item提交处理程序添加列表项
The second time you click it:第二次点击它：
- The click handler adds another submit handler点击处理程序添加另一个提交处理程序
- The first submit handler adds the list item第一个提交处理程序添加列表项
- The second submit handler adds the list item第二个提交处理程序添加列表项
And so on.等等。
Just add a submit handler.只需添加一个提交处理程序。 Get rid of the click handler that adds the submit handler.摆脱添加提交处理程序的点击处理程序。
解决方案2
0 2020-04-06 18:50:41
I found the answer.我找到了答案。 I needed to move我需要搬家
var taskInput = document.getElementById('taskId');
document.querySelector('form.taskForm').addEventListener('submit', function(e){
e.preventDefault()});
outside of the click function.在点击 function 之外。
this was the solution that worked for me:这是对我有用的解决方案：
document.querySelector('.add-task').addEventListener('click', onClick); document.querySelector('.add-task').addEventListener('click', onClick);
function onClick(addTask){ function onClick(addTask){
// create element const li = document.createElement('li'); // 创建元素 const li = document.createElement('li');
// add classname li.className = "list-group-item d-flex justify-content-between align-items-center"; // 添加类名 li.className = "list-group-item d-flex justify-content-between align-items-center";
// create text node and append (*** need to change new task to form data) li.appendChild(document.createTextNode(taskInput.value)); // 创建文本节点和 append (***需要将新任务更改为表单数据) li.appendChild(document.createTextNode(taskInput.value));
// append li as child to ul document.querySelector('ul.list-group').appendChild(li); // append li 作为 ul 的子元素 document.querySelector('ul.list-group').appendChild(li);
}; };
var taskInput = document.getElementById('taskId'); var taskInput = document.getElementById('taskId');
document.querySelector('form.taskForm').addEventListener('submit', function(e){ e.preventDefault()}); document.querySelector('form.taskForm').addEventListener('submit', function(e){ e.preventDefault()});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.