JavaScript初学者：无法实现单函数对多个DOM元素执行相同操作

你的代码运行异常的核心原因有2个：

• 你给#show元素重复绑定了2个点击事件，其中第一个绑定的事件处理函数中，调用hideElements时仅传入1个参数。你当前定义的hideElements需要2个入参，第二个参数为undefined时调用.classList.toggle会直接抛出JS异常，阻断后续所有代码执行。
• 你写的hideElements函数兼容性差，既不支持传入任意数量的元素参数，也没有做入参合法性校验。

1. 改写支持任意数量入参的工具函数 #

使用ES6的rest参数接收所有传入的元素，遍历执行类名切换，同时加非空判断避免异常：

function hideElements(...elements) {
  for (const ele of elements) {
    if (ele) ele.classList.toggle('hide')
  }
}

这个版本既支持单元素调用hideElements(show)，也支持多元素调用hideElements(container, show)，还可以传更多元素参数。

2. 清理重复绑定的事件，调整调用逻辑 #

删除多余的事件绑定，仅保留必要的逻辑，完整修复后的JS代码如下：

const makeRandColor = () => {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r},${g},${b})`;
}

const button = document.querySelector('#colorbtn')
const container = document.querySelector('#container')
const show = document.querySelector('#show')

// 改写后的通用切换函数
function hideElements(...elements) {
  for (const ele of elements) {
    if (ele) ele.classList.toggle('hide')
  }
}

// 初始隐藏show元素
hideElements(show)

button.addEventListener('click', function (e) {
  container.style.backgroundColor = makeRandColor();
  e.stopPropagation();
})

container.addEventListener('click', function () {
  // 点击container时，隐藏container，显示show
  hideElements(container, show);
})

show.addEventListener('click', function () {
  // 点击show时，显示container，隐藏show
  hideElements(container, show);
})

该代码完全符合你的需求：点击「Click to Hide」区域会隐藏该区域、显示「Click here to Show」区域；点击「Click here to Show」区域会隐藏自身、重新显示「Click to Hide」区域。

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