修改元素背景色的函数失效，但修改文档背景色正常，求排查原因

核心错误点 #

1. 变量存储错误：addEventListener 方法的返回值是 undefined，你把它直接赋值给了 maleToggle 和 femaleToggle，导致这两个变量根本不是DOM元素，自然无法修改其样式。
2. 逻辑错误：switch语句的两个分支都传入了 femaleToggle，点击「Male」按钮时的目标元素完全错误。
3. 事件目标不确定性：event.target 可能指向内部的 <p> 标签，而非绑定事件的外层div，导致获取的id不符合预期。

修复后的代码 #

HTML（无需修改）

<div class="gender-toggle">
        <div class="toggle">
          <div id="male-toggle">
            <p>Male</p>
          </div>
          <div id="female-toggle">
            <p>Female</p>
          </div>
        </div>
</div>

JavaScript

// 先获取DOM元素，再单独绑定事件
const maleToggle = document.getElementById('male-toggle');
const femaleToggle = document.getElementById('female-toggle');

maleToggle.addEventListener('click', changeGenderClick);
femaleToggle.addEventListener('click', changeGenderClick);

function changeGenderClick(event){
  // 使用currentTarget确保获取绑定事件的元素，不受内部子元素影响
  const genderElement = event.currentTarget;
  const genderId = genderElement.id;
  
  switch(genderId){
    case 'male-toggle':
      // 点击Male按钮时修改Female按钮样式，可根据需求调整目标
      changeGender(femaleToggle);
      break;
    case 'female-toggle':
      // 点击Female按钮时修改Male按钮样式，可根据需求调整目标
      changeGender(maleToggle);
      break;
  }
}

function changeGender(currentGender){
  currentGender.style.backgroundColor = 'red';
};

关键修复说明 #

• 分离元素获取与事件绑定：先将DOM元素存入变量，再给变量绑定事件，保证变量存储的是真实的DOM节点。
• 使用event.currentTarget：它始终指向绑定事件的元素，避免点击内部<p>标签时获取错误的id。
• 修正switch分支逻辑：让不同按钮点击时传入对应的目标元素，匹配交互需求。

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