JavaScript实现为class='colors'的Div添加按钮，点击按钮修改父元素文本颜色时仅修改最后一个元素的问题排查

你的代码里有两个核心问题导致了当前的异常表现：

1. 事件绑定只作用于最后一个按钮：因为你用var声明了btn变量，它是函数级作用域，在循环结束后，btn会指向最后一次循环创建的按钮，所以只有最后一个按钮绑定了点击事件。
2. 颜色修改范围错误：当前的ChangeColor函数会把所有.colors元素的颜色都改成红色，而不是你想要的点击按钮的父元素。

下面是修正后的完整代码：

HTML（无需修改） #

<div class="colors">Hi</div>
<div class="colors">Hello</div>
<div class="colors">Goodbye</div>

CSS（无需修改） #

.button {
  background-color: red;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  bottom: 10px;
  float: right;
  &:hover {
    cursor: pointer;
  }
  &:active {
    background-color: black;
    color: white;
  }
}

.colors {
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  width: 35%;
  margin: 10px 0;
  font-size: 20px;
  font-weight: bold;
  font-family: Sans-serif;
}

JavaScript（修正后的版本） #

var colors = document.querySelectorAll('.colors');
for (var i = 0; i < colors.length; i++) {
  var btn = document.createElement('button');
  btn.classList.add('button');
  btn.textContent = "Change";
  colors[i].append(btn);
  // 把事件绑定放到循环内部，每次创建按钮后立即绑定
  btn.addEventListener("click", function() {
    // 使用this.parentElement获取点击按钮的父元素（.colors）
    this.parentElement.style.color = "red";
  });
}

关键修改点说明： #

• 把事件绑定移入循环内部：这样每创建一个按钮，就立即给它绑定点击事件，确保每个按钮都能独立响应点击。
• 使用this.parentElement定位目标元素：在点击事件的回调函数里，this指向被点击的按钮，通过parentElement就能精准拿到它对应的父元素（也就是当前的.colors div），只修改这个元素的文本颜色，不会影响其他元素。

如果想让每个按钮修改的颜色可以自定义（比如不同按钮对应不同颜色），还可以给按钮添加自定义属性来实现：

// 循环时给每个按钮绑定不同的目标颜色
btn.dataset.targetColor = ['red', 'blue', 'green'][i];
// 点击时读取自定义属性设置颜色
this.parentElement.style.color = this.dataset.targetColor;

这样就能实现每个按钮修改对应父元素为不同颜色的个性化效果啦！

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