使用(Bootstrap) HTML和纯Javascript创建待办事项列表
使用(Bootstrap) HTML和纯Javascript创建待办事项列表
提问于 2018-06-04 07:50:31
我开始使用Javascript，需要一点帮助来创建一个简单的待办事项列表。我在Stack Overflow上看到过一些关于这类事情的问题，但其中大多数都使用了JQuery或与我所采用的方法非常不同的方法。代码成功地获取了输入值，并从输入值动态创建内容，它还可以在单击时切换一个“完整”的CSS类。我遇到的问题是，它不是为每个输入任务创建一个新的li，而是在第一次创建一个新的li，然后将新任务添加到该li中。
(function() { //IIFE
// DOM queries
var item = document.getElementById("input").value; //list item input
var ul = document.getElementById("task-list"); //task list container
var li = document.createElement('li');
li.className = "list-group-item"; //list item created and assigned class
var button = document.getElementById("button") //add item button
// event listeners
// add task on button click
button.addEventListener('click', function(){ //create new list item
li.appendChild(document.createTextNode(input.value)); //get input from form
ul.appendChild(li); //attach task to list
console.log('clicked');
}, false);
// toggle task complete on item click
li.onclick = function(){
console.log('toggle task completion');
li.classList.toggle('complete');
}
}()); //IIFE ENDS如何才能每次都创建一个新的li，而不是仅仅将新的任务添加到创建的第一个li？我相信这是一个简单的解决办法，我只是想不通。提前感谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-04 07:54:12
您需要为按钮单击侦听器内的每个li创建li和事件侦听器：
// DOM queries
var item = document.getElementById("input").value; //list item input
var ul = document.getElementById("task-list"); //task list container
var button = document.getElementById("button") //add item button
// event listeners
// add task on button click
button.addEventListener('click', function() { //create new list item
var li = document.createElement('li');
li.className = "list-group-item"; //list item created and assigned class
li.textContent = input.value;
ul.appendChild(li); //attach task to list
// toggle task complete on item click
li.onclick = function() {
console.log('toggle task completion');
li.classList.toggle('complete');
}
}, false);.complete { color: green }<input id="input">
<div id="button">add</div>
<ul id="task-list"></ul>
尽管使用事件委派在ul上只有一个侦听器可能会更好，而不是每次添加项目时都添加另一个侦听器：
// DOM queries
var item = document.getElementById("input").value; //list item input
var ul = document.getElementById("task-list"); //task list container
var button = document.getElementById("button") //add item button
// event listeners
// add task on button click
button.addEventListener('click', function() { //create new list item
var li = document.createElement('li');
li.className = "list-group-item"; //list item created and assigned class
li.textContent = input.value;
ul.appendChild(li); //attach task to list
}, false);
ul.onclick = (e) => {
if (e.target.tagName !== 'LI') return;
// toggle task complete on item click
console.log('toggle task completion');
e.target.classList.toggle('complete');
};.complete { color: green }<input id="input">
<div id="button">add</div>
<ul id="task-list"></ul>
Stack Overflow用户
发布于 2018-06-04 07:54:55
只需将创建li的所有内容放入onclick处理程序中：
(function() { //IIFE
// DOM queries
var item = document.getElementById("input").value; //list item input
var ul = document.getElementById("task-list"); //task list container
var button = document.getElementById("button") //add item button
// event listeners
// add task on button click
button.addEventListener('click', function(){ //create new list item
var li = document.createElement('li');
li.className = "list-group-item"; //list item created and assigned class
li.appendChild(document.createTextNode(input.value)); //get input from form
li.onclick = function(){
console.log('toggle task completion');
li.classList.toggle('complete');
}
ul.appendChild(li); //attach task to list
console.log('clicked');
}, false);
// toggle task complete on item click
}()); //IIFE ENDS这将确保它每次都创建新的li-element，而不是只创建一次
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50671984
复制相关文章
相似问题
腾讯云开发者
