如何将HTML按钮值传递给多按钮共用的JavaScript函数并识别触发源

方案1：最小改动实现（内联传参） #

修改HTML的onclick调用逻辑，传入this指代当前被点击的按钮元素，同时修改存在命名冲突的函数名：

<input id="input" type="text">
<button type="button" id="button00" onclick="handleBtnClick(this)" value="0">0</button>
<button type="button" id="button01" onclick="handleBtnClick(this)" value="1">1</button>

let input = document.getElementById("input");
// 不要使用name作为全局函数名，window.name是浏览器内置属性，会出现命名冲突
function handleBtnClick(triggerBtn) {
    // triggerBtn就是当前点击的按钮DOM对象，直接取它的value属性即可
    input.value = input.value + triggerBtn.value
}

方案2：更易维护的实现（事件委托，无内联绑定） #

去掉HTML中的内联onclick属性，给按钮增加统一类名，通过JS统一绑定事件：

<input id="input" type="text">
<button type="button" class="num-btn" id="button00" value="0">0</button>
<button type="button" class="num-btn" id="button01" value="1">1</button>

let input = document.getElementById("input");
// 给所有同类型按钮批量绑定点击事件
document.querySelectorAll('.num-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        input.value += this.value
    })
})

注意事项 #

• 内联onclick绑定属于旧写法，更推荐用addEventListener做事件绑定，方便后续事件的管理和移除
• 全局作用域下不要使用name、top、parent这类浏览器内置全局属性作为变量/函数名，会出现无法预料的执行异常

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