如何通过变量调用getElementById？实现按钮点击单一变色效果

当然可以通过变量传递ID来调用document.getElementById()，但更高效的方式是通过统一类名批量选择按钮，避免逐个获取元素。结合你需要的「点击仅当前按钮变色、其余恢复」的需求，以下是两种可行方案：

方案一：通过类名批量处理（推荐） #

给所有按钮添加统一类名，一次性获取所有目标元素，再批量绑定事件：

修改后的HTML #

<form>
  <div><button id="1" class="num-btn">1</button></div>
  <div><button id="2" class="num-btn">2</button></div>
  <div><button id="3" class="num-btn">3</button></div>
  <div><button id="4" class="num-btn">4</button></div>
  <div><button id="5" class="num-btn">5</button></div>
  <div><button id="6" class="num-btn">6</button></div>
  <div><button id="7" class="num-btn">7</button></div>
  <div><button id="8" class="num-btn">8</button></div>
  <div><button id="9" class="num-btn">9</button></div>
  <input type="submit" class="submit" value="Submit" onclick="subFunc()">
</form>

对应的JavaScript #

// 一次性获取所有带num-btn类的按钮
const buttons = document.querySelectorAll('.num-btn');

// 遍历按钮，绑定点击事件
buttons.forEach(btn => {
  btn.addEventListener('click', function handleClick() {
    // 重置所有按钮的背景色
    buttons.forEach(b => b.style.background = '');
    // 给当前点击的按钮设置目标背景色
    this.style.background = '#53E247';
    // 阻止表单默认提交行为（按钮在form内会自动触发提交）
    event.preventDefault();
  });
});

方案二：通过变量传递ID循环处理 #

如果必须依赖ID范围（比如已知ID是1-9），可以用循环生成ID字符串来逐个获取元素：

JavaScript代码 #

// 遍历ID 1到9
for (let i = 1; i <= 9; i++) {
  const btn = document.getElementById(i.toString());
  btn.addEventListener('click', function() {
    // 重置所有按钮的背景色
    for (let j = 1; j <= 9; j++) {
      document.getElementById(j.toString()).style.background = '';
    }
    // 设置当前按钮的背景色
    this.style.background = '#53E247';
    // 阻止表单默认提交行为
    event.preventDefault();
  });
}

关键说明 #

1. 两种方案都实现了「点击时仅当前按钮高亮」的逻辑：先重置所有按钮样式，再给当前点击的按钮设置背景色。
2. 添加event.preventDefault()是因为按钮在<form>标签内，默认点击会触发表单提交，导致页面刷新，无法看到样式变化。
3. 方案一的类名方式更灵活，后续新增/修改按钮无需调整JS代码，推荐优先使用。

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