使用循环的JavaScript代码无法实现单个li点击变绿的问题求助

我来帮你梳理下代码里的问题，以及对应的解决办法：

问题根源 #

1. 元素选择错误：你用document.querySelector('ul')获取的是整个<ul>容器，而不是所有<li>元素的集合。所以list.length是undefined，后续的循环根本没有执行，自然没法给每个li绑定点击事件。
2. 重复绑定风险：就算改成document.querySelectorAll('li')，每次调用newItem()时都会给所有已存在的li重复绑定事件，导致点击一次触发多次变色逻辑，这也是不合理的。

方案一：给新创建的li直接绑定事件 #

每次添加新的列表项时，直接给这个新创建的li绑定点击事件，逻辑简单直接：

function newItem(){ 
  var list = document.createElement('li'); 
  var input = document.getElementById('item').value; 
  var text = document.createTextNode(input); 
  list.appendChild(text); 
  document.getElementById("myUL").appendChild(list);

  // 给当前新创建的li绑定点击事件
  list.addEventListener('click', function() {
    this.style.color = 'green';
  });

  // 清空输入框，优化用户体验
  document.getElementById('item').value = '';
}

对应的HTML代码不需要改动：

<div class="container"> 
  <h1>My To Do List</h1> 
  <input type="text" placeholder="Enter your list" id="item"> 
  <button onclick ="newItem()">add</button> 
  <ul id="myUL"></ul>
</div>

方案二：事件委托（推荐） #

这种方式只需要给父元素<ul>绑定一次事件，不管后续添加多少li，都能响应点击操作，性能更优，尤其适合动态更新的列表：

// 页面加载完成后，给ul绑定一次事件委托
document.addEventListener('DOMContentLoaded', function() {
  const todoList = document.getElementById('myUL');
  todoList.addEventListener('click', function(event) {
    // 确认点击的目标是li元素
    if (event.target.tagName === 'LI') {
      event.target.style.color = 'green';
    }
  });
});

function newItem(){ 
  var list = document.createElement('li'); 
  var input = document.getElementById('item').value; 
  var text = document.createTextNode(input); 
  list.appendChild(text); 
  document.getElementById("myUL").appendChild(list);

  // 清空输入框
  document.getElementById('item').value = '';
}

HTML代码同样不需要改动。事件委托的核心是利用事件冒泡机制，父元素监听所有子元素的点击事件，再通过event.target判断点击的具体元素，避免重复绑定事件。

内容的提问来源于stack exchange，提问作者kyam po