如何将参数添加到 EventListener 内部的函数中？

Question

我的想法是用 vanila JS 编写一个计算器，但遇到了问题。我想通过绑定键来解决它，并分别为每个键添加事件监听器。为了不重复我的代码，我想创建一个可以做所有事情的函数，我只添加一个键号作为参数。当我运行代码时，它会立即触发函数，而无需单击 "number two" 。我知道，问题出在 "click",getInput(two)，我想让这个函数起作用。有什么想法吗？

let input = document.getElementById("input").innerHTML;
const plus = document.querySelector(".plus");
const minus = document.querySelector(".minus");
const one = document.querySelector(".one");
const two = document.querySelector(".two");
const three = document.querySelector(".three");
const four = document.querySelector(".four");
const five = document.querySelector(".five");
const six = document.querySelector(".six");
const seven = document.querySelector(".seven");
const eight = document.querySelector(".eight");
const nine = document.querySelector(".nine");
const ac = document.querySelector(".ac");

function getInput(number){
    console.log("i am here");
    console.log(number.textContent);
    if (input === 0){
        input = number.textContent;
        document.getElementById("input").innerHTML = input;
    }
    else{
        input += number.textContent;
        document.getElementById("input").innerHTML = input;
    }
}

two.addEventListener("click",getInput(two));

ac.addEventListener("click",() =>{
   input = 0;
   console.log(input);
   document.getElementById("input").innerHTML = input;
})
plus.addEventListener("click",() => {
    console.log(plus.textContent);
    input += plus.textContent;
    document.getElementById("input").innerHTML= input;
});

one.addEventListener("click",()=>{
    if (input === 0) {
        input = one.textContent;
        document.getElementById("input").innerHTML=input;
    }
    else {
    input += one.textContent;
    document.getElementById("input").innerHTML=input;
    }
})

第二个问题，有没有不绑定每个键更简单的检测用户输入的方法？（我是 JS 的新手，这对我有很大帮助）

卡帕克

Answer 1

要在事件侦听器中触发带有参数的函数，您需要在事件侦听器中创建一个函数来执行带有参数的函数：

btn.addEventListener("click", () => { yourFunction(parameter) });

要统一事件绑定，你可以做这样的事情：

const numberBtns = document.querySelectorAll(".number-btns");
numberBtns.forEach( btn => btn.addEventListener(....));

要获取您按下的数字，您可以使用数据集或参考按钮的值：

<button data-number="1" class="number-btns" value="1">
// JS:
btn.dataset.number // = 1
btn.value // = 1

如何将参数添加到 EventListener 内部的函数中？

How can I add a parameter into function, that is inside EventListener?

javascript

calculator