ループ内の各ボタンにeventListenerを掛ける方法は？

Question

私はforループで作成する10個のボタン0-9を持つ電卓を作成しようとしています。 各ボタンには、ユーザーがそのボタンを押したことを示すEventListenerが必要です。 私は別のボタン 'add'をクリックすると、それが自分のリスナーを持っている理由を理解しようとしています。

は、これは私が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); 

を、デバッガで私は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