2016-12-22 3 views
0

Im пытается создать калькулятор с 10 кнопками 0-9, которые я создаю в цикле for. Каждая кнопка должна иметь EventListener, чтобы указать, что пользователь нажал на нее. Im пытается выяснить, почему, при нажатии на другую кнопку «добавить», у которой есть свой собственный слушатель, кнопка «Я получаю направленную на неправильную функцию».Как вы используете множитель eventListener для каждой кнопки в цикле?

Это, как я создаю на 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(). и когда Im нажимает на каждую из 0-9 кнопок, ни одна из функций не вызывается.

ответ

3

Вы вызываете метод 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