如何使用JS通过ID切换元素类名，现有代码运行失效求修复方案

代码错误点整理 #

• 方法名拼写错误：DOM 中不存在 getElementsById 方法，ID 为页面唯一标识，正确方法为单数形式 document.getElementById()，调用后直接返回单个元素，无需循环遍历
• 参数传递错误：getElementById() 仅支持传入单个 ID 作为参数，同时传入 B、C、D 三个 ID 时，只会返回第一个参数对应的元素，无法批量获取多个元素
• 语法结构错误：代码中存在多处无意义的空代码块，逻辑结构不完整

修复后的可运行代码 #

// 入参为需要选中的选项ID，例如 'A'/'B'/'C'/'D'
function switchclass(selectedId) {
  // 先重置所有选项为未选中状态
  const allOptionIds = ['A', 'B', 'C', 'D'];
  allOptionIds.forEach(id => {
    const option = document.getElementById(id);
    if (option) {
      option.className = 'notselected';
    }
  });
  // 设置目标选项为选中状态
  const targetOption = document.getElementById(selectedId);
  if (targetOption) {
    targetOption.className = 'selected';
  }
}

调用示例 #

给每个选项绑定点击事件即可实现点击切换选中效果：

<div class="option notselected" id="A" onclick="switchclass('A')">选项A</div>
<div class="option notselected" id="B" onclick="switchclass('B')">选项B</div>
<div class="option notselected" id="C" onclick="switchclass('C')">选项C</div>
<div class="option notselected" id="D" onclick="switchclass('D')">选项D</div>

效果示意 #

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