从HTML集合中选择一个项目

Question

我试图选择被推入我的数组的元素（lis）（做一个ul ）..当调用函数（nu）时，它会创建一个新的li并将其存储在HTML Collection中...我想要以便选择那些li作为样式。

 var input = document.querySelector("#input"); var todos = []; var list = document.getElementById("list"); var lis = document.getElementsByTagName("li") var btns = document.querySelectorAll("button") function nu() { input.addEventListener("change", function () { todos.push(input.value) list.innerHTML += "<li>" + input.value + "</li>" input.value = "" }) return list; } function alo() { for (i = 0; i < todos.length; i++) { lis.item(i).addEventListener("click", function () { alert("alo") }) } } function disp() { todos.forEach(i => { list.innerHTML += "<li>" + i + "</li>" }); return list; } disp() nu() 

我试图做到这一点

 function silly() { for (i = 0; i < lis.length; i++) { lis[i].addEventListener("click", function () { alert("working") }) } } 

仍然不起作用：/ ..

这是我的html

 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="new.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>New To-do!</title> </head> <body> <div class="container"> <h1>MY TO-DO</h1> <input type="type" placeholder="New TO-DO" id="input"> <ul id="list"> </ul> </div> <script src="todo.js" type="text/javascript"></script> </body> </html> 

这是输出，我想为那些待办事项设置样式。

JSFiddle： https ://jsfiddle.net/cytjae3z/

Answer 1

您创建的函数实际上有效，我认为您的问题出在以下事实：您无法在正确的位置（在input.addEventListener调用它。 这是一个工作示例：

 var input = document.querySelector("#input"); var todos = []; var list = document.getElementById("list"); var lis = document.getElementsByTagName("li") var btns = document.querySelectorAll("button") function nu() { input.addEventListener("change", function() { todos.push(input.value) list.innerHTML += "<li>" + input.value + "</li>" input.value = "" silly() }) return list; } function alo() { for (i = 0; i < todos.length; i++) { lis.item(i).addEventListener("click", function() { alert("alo") }) } } function disp() { todos.forEach(i => { list.innerHTML += "<li>" + i + "</li>" }); return list; } function silly() { for (i = 0; i < lis.length; i++) { lis[i].addEventListener("click", function() { this.style.backgroundColor = "#" + ((1 << 24) * Math.random() | 0).toString(16) }) } } disp() nu() 

 <div class="container"> <h1>MY TO-DO</h1> <input type="type" placeholder="New TO-DO" id="input"> <ul id="list"> </ul> </div>