我开始使用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?我相信这是一个简单的解决办法,我只是想不通。提前感谢!
发布于 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>
发布于 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,而不是只创建一次
https://stackoverflow.com/questions/50671984
复制相似问题