JS点击动态pilihan元素改背景色报Cannot set properties of undefined错误

错误原因 #

你遇到的报错和动态元素无关，你给.questionBox绑定的事件委托写法是正确的，已经兼容了动态生成的.pilihan元素，报错来自点击事件内部的两行代码，具体问题如下：

• 第一个错误：document.getElementsByClassName的入参不需要加类选择器前缀.，你传入.pilihan会匹配不到任何元素，方法返回空集合。
• 第二个错误：就算修正入参为pilihan，getElementsByClassName返回的是HTMLCollection类数组对象，不是单个DOM节点，直接访问.style属性自然会提示undefined。

修复方案 #

如果要实现「点击哪个.pilihan就把哪个的背景设为红色」，直接用事件回调里的this指向当前点击元素的特性即可，有两种写法可选：

1. jQuery写法（和现有代码风格统一，更简洁）

$(".questionBox").on("click", "span.pilihan", function() {
  $(this).css("background-color", "red");
});

2. 原生JS写法

$(".questionBox").on("click", "span.pilihan", function() {
  // this直接指向当前点击的span DOM元素，不需要重复查询DOM
  this.style.backgroundColor = "red";
});

额外优化提示 #

如果需要实现单选效果（点击新选项后取消之前选中的红色背景），可以在设置当前点击元素样式前先把所有.pilihan的背景清空：

$(".questionBox").on("click", "span.pilihan", function() {
  $(".pilihan").css("background-color", "transparent");
  $(this).css("background-color", "red");
});

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