如何用JavaScript修改HTML Input按钮的onclick属性？

我有一组按钮的HTML代码如下：

<input id="btnDay1" class="daybtn" type="button" value="Day 1" onclick="displayGraphicxxx(Day1)"></input>
<input id="btnDay2" class="daybtn" type="button" value="Day 2" onclick="displayGraphicxxx(Day2)"></input>

当用户切换选项时，需要把按钮的onclick里的displayGraphicxxx替换成displayGraphicyyy，变成这样：

<input id="btnDay1" class="daybtn" type="button" value="Day 1" onclick="displayGraphicyyy(Day1)"></input>
<input id="btnDay2" class="daybtn" type="button" value="Day 2" onclick="displayGraphicyyy(Day2)"></input>

试过innerHTML和.value都没用，请问该怎么通过代码修改onclick部分？

解决方案 #

方法1：直接重写onclick属性

你可以直接获取按钮元素，给它的onclick赋值新的函数逻辑，这是最直接的方式：

// 逐个获取按钮并修改
const btn1 = document.getElementById('btnDay1');
const btn2 = document.getElementById('btnDay2');

// 方式A：用匿名函数包裹目标调用
btn1.onclick = function() { displayGraphicyyy(Day1); };
btn2.onclick = function() { displayGraphicyyy(Day2); };

// 方式B：箭头函数写法（更简洁）
btn1.onclick = () => displayGraphicyyy(Day1);
btn2.onclick = () => displayGraphicyyy(Day2);

方法2：用事件监听（更推荐的现代写法）

直接修改onclick属性会覆盖原有绑定，用addEventListener更灵活，还能避免冲突。如果要替换原有事件，可以先清空onclick再添加新监听：

// 批量处理所有.daybtn类的按钮
document.querySelectorAll('.daybtn').forEach(btn => {
  // 清空原有的onclick绑定
  btn.onclick = null;
  // 从按钮ID提取对应的Day变量（比如btnDay1对应Day1）
  const dayVar = window[btn.id.replace('btn', '')];
  // 添加新的点击事件监听
  btn.addEventListener('click', () => {
    displayGraphicyyy(dayVar);
  });
});

为什么innerHTML和.value没用？ #

• innerHTML针对的是元素内部的HTML内容，而<input>是自闭合标签，没有内部内容，所以修改它不会影响onclick属性。
• .value修改的是按钮上显示的文字（也就是HTML里的value属性），和点击事件完全无关，自然起不到作用。

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