我试图选择被推入我的数组的元素(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/

#1楼 票数:0 已采纳

您创建的函数实际上有效,我认为您的问题出在以下事实:您无法在正确的位置(在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> 

  ask by Misha translate from so

未解决问题?本站智能推荐:

1回复

如何将事件监听器添加到html集合中的每个元素?

我正在设法将每个inputs[i]到控制台。 inputs[i]存在。 但是我收到了Uncaught TypeError:无法读取未定义的属性'addEventListener' 如果我可以将每个人都登录到控制台,该怎么定义呢? 有人可以解释一下我5岁吗?
2回复

如何从html表单获取多个复选框值

我知道我可以使用jQuery( 如何使用jquery获取多个复选框的值 )在存在多个复选框的情况下获取复选框的值,但是我的复选框输入位于html表单内,因此这些jQuery解决方案无法正常工作,因为它们都无法获取表单中的复选框值。 我尝试从表单中提取值,但它只会创建一个奇怪的单选节点列表,该
1回复

你会怎么去抓住一个元素的值,当元素在节点列表内?

我目前正在为客户的问卷应用程序开发“导出到 csv”,其中所有用户输入数据都被捕获并写入 .csv 文件。 在由 getElementsByTagName() 捕获的 HTML 集合中存在<input>和<select>元素。 下面是我的 HTML 代码片段: 完成这一切的功
2回复

JS循环添加事件侦听器在第二个元素的一个条件下不起作用

我正在编写一段代码,通过在 UL 上切换一个将不透明度/高度更改为 0 的类(以便我也可以应用过渡)来单击相应的按钮来切换某些 UL 项目的可见性。 当第一个元素切换为不可见时,第二个元素不起作用。 onclick 事件未注册。 当按钮和 h3 的样式未设置为出现在同一行时,代码会起作用,当我尝试
2回复

如何从节点列表中选择元素值?

我需要练习帮助。 我必须使用特定的TextNode创建一个新元素。 此TextNode是两个输入的值。 单击提交按钮时,FirstName和LastName创建具有该值的新段落。 我尝试做了很多没有成功的事情。 结果没有显示出来。 这是代码段: (function() {
3回复

如何使用javascript将HTML网页上的字符串替换为另一个字符串?

我需要为HTML网站使用JavaScript更改一个字符串。 因此,“ AuthorList”具有带有字符串“ Test String”的nodeList。 我需要将所有出现的“测试字符串”更改为“新测试”。 我已经尝试了以下代码的许多不同修改。 我似乎无法找出另一种方法而不会出错。
2回复

如何区分实时和非实时NodeList集合?

document.getElementsByTagName('div')和document.querySelectorAll('div')都返回NodeList集合。 唯一的区别是第一种方法返回实时收集,第二种方法返回静态收集。 问题是 - 是否有机会仅通过检查这些对象来区分一个对象(即
5回复

创建一个函数来获取选择器,例如使用纯JavaScript的jquery

我已经厌倦了将jquery包含在简单的项目中,但是我已经习惯了使用它,并且我试图摆脱对它的依赖。 我正在尝试创建一个函数,该函数将给人一种获得类和标签之类的选择器的感觉。 示例: $('selector').innerHTML = ".something"; 。 我刚刚像这样逐个循环: