如何在事件监听器中传入外部HTML元素ID实现计算器功能？

你的核心需求是在事件监听器中传入输入框ID，同时代码里存在几处逻辑细节需要修正，以下是具体解决步骤：

1. 直接在事件回调中传入输入框ID #

由于两个输入框的ID（num1、num2）是固定的，你可以直接在点击回调里把它们的CSS选择器（#num1、#num2）传给actionCall。另外注意：箭头函数不会绑定自身的this，所以要通过当前元素的ele.id获取按钮ID，而非this.id：

document.querySelectorAll('.calcButton').forEach(ele => {
    ele.addEventListener('click', () => {
        // 直接传入固定的输入框选择器，以及当前按钮ID
        actionCall('#num1', '#num2', ele.id);
    });
});

2. 修正calc函数的参数传递错误 #

你的calc函数中，最后调用func(num1, num2)时传的是选择器字符串，但getPlus和getMul需要的是解析后的数值，因此要把转换好的n1、n2传入：

function calc(num1Selector, num2Selector, func) {
    var n1 = parseInt(document.querySelector(num1Selector).value),
        n2 = parseInt(document.querySelector(num2Selector).value);

    // 传入解析后的数值，而非选择器字符串
    func(n1, n2);
}

3. 优化actionCall逻辑（可选） #

可以通过按钮ID与计算函数的映射关系，替代if-else判断，让代码更简洁：

// 建立按钮ID到对应计算函数的映射表
const funcMap = {
    plusBtn: getPlus,
    mulBtn: getMul
};

function actionCall(num1Selector, num2Selector, btnId) {
    const targetFunc = funcMap[btnId];
    if (targetFunc) {
        calc(num1Selector, num2Selector, targetFunc);
    }
}

完整修正后的代码 #

HTML（保持不变） #

<div>
    <input id="num1" type="text" value="1" style="width: 70px">
    <input id="num2" type="text" value="2" style="width: 70px"> 
</div>
<div>
    <button class="calcButton" id="plusBtn" >Plus</button> <br>
    <button class="calcButton" id="mulBtn">Multiply</button>
</div>

JavaScript #

function getPlus(num1, num2) {
    console.log(num1 + num2);
}

function getMul(num1, num2) {
    console.log(num1 * num2);
}

function calc(num1Selector, num2Selector, func) {
    var n1 = parseInt(document.querySelector(num1Selector).value),
        n2 = parseInt(document.querySelector(num2Selector).value);

    func(n1, n2);
}

const funcMap = {
    plusBtn: getPlus,
    mulBtn: getMul
};

function actionCall(num1Selector, num2Selector, btnId) {
    const targetFunc = funcMap[btnId];
    if (targetFunc) {
        calc(num1Selector, num2Selector, targetFunc);
    }
}

document.querySelectorAll('.calcButton').forEach(ele => {
    ele.addEventListener('click', () => {
        actionCall('#num1', '#num2', ele.id);
    });
});

关键说明 #

• 输入框ID固定时，直接在回调中传入选择器即可；若后续需动态切换输入框，可将选择器存入变量再传递。
• 箭头函数的this指向外层作用域，必须通过ele.id获取当前按钮ID。
• 计算函数需要接收数值而非选择器，因此calc内部要完成字符串到数值的转换再传递。

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