我正在尝试添加一个子元素 to a 父元素如下:
-
li
要添加到ul
- 单击 Enter 按钮或按下键盘上的 Enter 键时,会生成一个新的
li
and delete按钮应该添加到ul
.
我的代码无法正常工作。有人可以帮我解决这个问题吗?
HTML:
<h1>Simple Add/Remove Task</h1>
<h2>To do List</h2>
<input type="text" placeholder="enter your tasks" id="userInput">
<button id="enter">Enter</button>
<ul>
<li class="todos">Wake up <button>Delete</button></li>
<li class="todos">Study<button>Delete</button></li>
</ul>
CSS:
.done {
text-decoration: line-through;
}
JavaScript:
var listItems = document.querySelectorAll(".todos");
var input = document.getElementById("userInput");
var ul = document.querySelectorAll("ul");
var button = document.getElementById("enter");
button.addEventListener("click", function(){
if(input.value.length>0){
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
}
});
input.addEventListener("keypress", function(){
if(input.value.length > 0 && event.which === 13){
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
}
});
for (var i = 0; i<listItems.length; i++){
listItems[i].addEventListener("click", function(){
this.classList.toggle("done");
});
}
querySelectorAll
返回节点列表。 NodeList不包含appendChild方法。所以要么尝试更换ul.appendChild
with ul[0].appendChild
或者只是重构你的代码
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)