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

Question

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

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 // = 1btn.value // = 1