Question

我试图创建一个具有10个按钮0-9的计算器，我在for循环中创建。每个按钮都需要有一个EventListener来指示用户按下它。我试图弄清楚为什么，当点击一个不同的按钮＆＃39;添加＆＃39;，有他自己的听众是按钮我被定向到错误的功能。

这就是我创建10个按钮的方式：

var count = 0;
function calcolator() {

    //calc div
    var calc_screen = document.createElement("div");
    calc_screen.id = "calc_screen".concat(count.toString());
    calcs_screen.appendChild(calc_screen);

    var result = document.createElement("input");
    result.type = "text";
    result.id = "result".concat(count.toString());
    result.readonly = true;
    result.value = "0";
    calc_screen.appendChild(result);
    for (var i = 0; i <= 9; i++) {
        var numberBtn = document.createElement("BUTTON");
        numberBtn.id = count.toString().concat(i.toString());
        numberBtn.textContent = i.toString();
        numberBtn.value = i.toString();
        numberBtn.addEventListener("click",writeNumberOrOperation(numberBtn.id,result.id));
        calc_screen.appendChild(numberBtn);
    }
    count++;
}

我有这个具有不同EventListener的按钮：

//add button
var addCalcBtn = document.createElement("BUTTON");
addCalcBtn.textContent = "Add Calculator for free";
addCalcBtn.addEventListener("click",calcolator);
calcs_screen.appendChild(addCalcBtn);

因此，当我按下＆＃39;添加＆＃39;时，在调试器中我看到我被定向到writeNumberOrOperation()功能。当我按下每个0-9按钮时，没有任何功能被调用。

Answer 1

您正在调用方法writeNumberOrOperation并将其返回值绑定为事件处理程序。

使用

//Associate result.id using data-* prefix attribute
numberBtn.dataset.resultid = result.id;
//Bind click handler
numberBtn.addEventListener("click",function(){
    writeNumberOrOperation(this.id,this.dataset.resultid);
});

参考HTMLElement.dataset

如何为循环中的每个按钮使用multiply eventListener？

1 个答案: