JavaScript - passing external html id into event listener

Question

I'm currently learning about event listener by setting up a simple calculator - taking in 2 inputs, clicking the button will print out the calculated action. The code is as follows

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);
    });
});

While I do know how to differentiate the calculation action inside the event listener based on the button id (plus, multiply, etc.). I couldn't find out how to pass the two ids "num1" and "num2" inside it.

Thank you in advance!

Answer 1

document.querySelector() takes css selector string. you can pass "#num1" and "#num2" (like you select them in css) to your function.

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>