我更改元素背景颜色的功能不起作用，但在更改文档背景颜色时工作正常？

Question

我使用 switch 语句来确定按下哪个按钮，它们在更改文档背景颜色时都使用相同的函数，但是，当我传入实际元素并将其定位在函数中并尝试更改它时背景颜色没有发生任何事情。

更改实际文档的背景颜色工作正常，但更改传递到函数的元素的背景颜色不起作用。

<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>

const maleToggle = document.getElementById('male-toggle').addEventListener('click', changeGenderClick);
const femaleToggle = document.getElementById('female-toggle').addEventListener('click', changeGenderClick);

function changeGenderClick(event){
  const genderId = event.target.id;
  switch(genderId){
    case 'male-toggle':
      changeGender(femaleToggle);
      break;
    case 'female-toggle':
      changeGender(femaleToggle);
    break;
  }
}

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

Answer 1

您没有传递

#male-toggle

元素。您传递的是

.addEventListener

的返回值，即

undefined

。将声明和事件侦听器分配拆分为两个单独的行：

const maleToggle = document.getElementById('male-toggle');

maleToggle.addEventListener('click', changeGenderClick);

对

#female-toggle

做同样的事情。