JavaScript - 将外部 html id 传递给事件侦听器

Question

我目前正在通过设置一个简单的计算器来学习事件侦听器——接受 2 个输入，单击按钮将打印出计算出的操作。代码如下

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>

JS

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

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

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

    func(num1, num2);
}

function actionCall(num1, num2, func) {
    if (func === 'getPlus')
        calc(num1, num2, getPlus);
    else
        calc(num1, num2, getMul);
}

//add event listener to buttons 
document.querySelectorAll('.calcButton').forEach( ele => {
    ele.addEventListener('click', () => {
        actionCall(this.id);
    });
});

虽然我确实知道如何根据按钮 ID（加号、乘号等）区分事件侦听器内的计算操作。我找不到如何在其中传递两个 ID“num1”和“num2”。

提前谢谢你！

Answer 1

document.querySelector()

采用

css

选择器字符串。您可以将

"#num1"

和

"#num2"

（就像您在css中选择它们一样）传递给您的函数。

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

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

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

    func(n1, n2); // 👈 edited here. get the value from inputs and pass them to func.
}

function actionCall(num1, num2, func) {
    if (func === 'getPlus')
        calc(num1, num2, getPlus);
    else
        calc(num1, num2, getMul);
}

//add event listener to buttons 
document.querySelectorAll('.calcButton').forEach( ele => {
    ele.addEventListener('click', function() { // 👈 edited here. using normal function instead of arrow function so that we can use "this" keyword.
        actionCall("#num1", "#num2", this.id); // 👈 edited here. passing the inputs' id and the button's id.
    });
});

<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="getPlus" >Plus</button> <br> <!-- 👈 edited here. changed id to match the function name. -->
    <button class="calcButton" id="getMul">Multiply</button> <!-- 👈 edited here. changed id to match the function name. -->
</div>