JavaScript问题：选择背景色时设置label颜色报错‘Cannot set property 'color' of undefined’

嗨，我来帮你搞定这个问题！你遇到的错误主要来自两个小疏忽，咱们一步步捋清楚：

问题1：getElementsByTagName返回的是元素集合，不是单个元素 #

document.getElementsByTagName('label')会返回一个类似数组的HTMLCollection元素集合，你不能直接给整个集合设置style.color，必须遍历每个label元素，逐个修改样式。

问题2：字符串比较时未加引号 #

你代码里的x.value == red这部分，red没有用引号包裹，JavaScript会把它当作一个未定义的变量，导致条件判断完全不生效，还可能引发额外错误。正确写法应该是x.value == 'red'（单引号或双引号都可以）。

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

修正后的JavaScript代码 #

function changeBackground(x){ 
  var body = document.getElementById('body'); 
  body.style.backgroundColor = x.value; 
  // 获取所有label元素集合
  const labels = document.getElementsByTagName('label');
  // 遍历集合，给每个label设置对应颜色
  for(let i = 0; i < labels.length; i++){
    if (x.value == 'red') { 
      labels[i].style.color = 'grey'; 
    } else if (x.value == 'blue') { 
      labels[i].style.color = 'white'; 
    } else if (x.value == 'green') { 
      labels[i].style.color = 'yellow'; 
    }
  }
}

额外小提醒 #

你的HTML里id=" firstName"（firstName的id前面多了个空格），这会导致后续用getElementById获取元素时失败，建议把空格去掉，改成id="firstName"。

这样修改后，选择下拉菜单的颜色时，不仅body背景色会变化，所有label的文字颜色也会同步对应改变啦！

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