итерация по нескольким кнопкам с использованием массива пар ключ-значение для добавления прослушивателей событий с циклами

Question

Я работаю над проектом простого калькулятора

Я пытаюсь автоматизировать добавление прослушивателей событий для различных цифровых кнопок (1-9).

Слушатели событий будут прослушивать события нажатия на кнопках, приводящие к изменению в разделе отображения HTML (class = .display)

парами ключевых значений являются b1-b9, содержащие различные соответствующие значения.

Я придумал нижеследующий цикл FOR EACH. По некоторым причинам это заставляет все цифровые кнопки применять число 9; который я считаю причиной каждого цикла.

Я не уверен, как это исправить. Я также придумал альтернативный цикл FOR, который приводит к другой проблеме. pair [Properties [i]]. toString () возвращает неопределенное значение.

интересно, если я поменяю пары [Properties [i]]. ToString () на i, то ТО ЖЕ проблема возникает

Помощь очень признателен и спасибо ..

const pairs = {
    b1: 1,
    b2: 2,
    b3: 3,
    b4: 4,
    b5: 5,
    b6: 6,
    b7: 7,
    b8: 8,
    b9: 9,
};
var Properties = Object.keys(pairs);

function loadButtons () {
    for (var item in pairs) {
        //for each key property in pairs

        console.log(item);
        let targetCell = document.querySelector("." + item.toString())
        // querySelector only targets the FIRST element found
        // in this case only 1 for that name
        console.log(targetCell);
        targetCell.addEventListener('click', () => {
            // you want it to manipulate the display as and when clicked
            var currentDisplay = document.querySelector(".display").innerHTML.toString();
            newDisplay = currentDisplay + pairs[item].toString();
            document.querySelector(".display").innerHTML = newDisplay;

        })


        // console.log(pairs[item]);
        // // pairs[item] retrieves the value to that "key"        
    }
};

function alternative() {
    var i;
    var Properties = Object.keys(pairs);
    for (i = 0; i < Properties.length; i++) {
        let targetCell = document.querySelector("." + Properties[i].toString())
        // querySelector only targets the FIRST element found
        // in this case only 1 for that name
        console.log(targetCell);
        targetCell.addEventListener('click', () => {
            // you want it to manipulate the display as and when clicked
            var currentDisplay = document.querySelector(".display").innerHTML.toString();
            newDisplay = currentDisplay + pairs[Properties[i]].toString();
            document.querySelector(".display").innerHTML = newDisplay;

        })
    };
};

Ожидается, что при нажатии кнопки 1 будет добавлена ​​строка «1» к текущей строке калькулятора и т. Д.

Answer 1

Я сделаю это так, но я думаю, что это не единственный способ, и могут быть лучшие способы.

   const BUTTONS_NAMESVALUES={
//-- sound awful when a loop can do that!
bt0:0,bt1:1,bt2:2,bt3:3,bt4:4,bt5:5,bt6:6,bt7:7,bt8:8,bt9:9
}
function checkButtonValue(bt){
if(BUTTONS_NAMESVALUES[bt.id] !=null && BUTTONS_NAMESVALUES[bt.id] !='undefined'){
 return bt.innerHTML;
}return;
}

//a button may look like that
<button id="bt1">1</button>

//-- with listener:

document.getElementById('bt1').addEventListener('click', function(e){
let chk=checkButtonValue(this);
if(chk!=null && chk!='undefined' && chk!=''){
document.getElementById('calculatorScreen').innerHTML=''+document.getElementById('calculatorScreen').innerHTML+chk;
}

});

Надеюсь, что поможет.Я просто заменяю имя класса «.display», которое легко может быть источником ошибки (потому что это имя свойства CSS, и все, что отображается, отображается в HTML + с использованием идентификатора лучше в этом случае, потому что это уникальный элемент и не может бытьошибочно, классы нет) и не очень точный (так как я пишу правильное постоянное имя, которое имеет некоторый смысл вместо пар, которые на самом деле ничего не значат ^^).

Ни я не автоматизировал код вцикл, но это самая простая часть, кто когда-либо был в вашем сценарии.

Answer 2

function onClick(item, pairs) {
return () => {
            // you want it to manipulate the display as and when clicked
            var currentDisplay = document.querySelector(".display").innerHTML.toString();
            var newDisplay = currentDisplay + pairs[item].toString();
            document.querySelector(".display").innerHTML = newDisplay;
}
} 
var Properties = Object.keys(pairs);
function loadButtons () {
    for (var item in pairs) {
        //for each key property in pairs

        console.log(item);
        let targetCell = document.querySelector("." + item.toString())
        // querySelector only targets the FIRST element found
        // in this case only 1 for that name
        console.log(targetCell);
        targetCell.addEventListener('click', onClick(item, pairs)) 


        // console.log(pairs[item]);
        // // pairs[item] retrieves the value to that "key"        
    }
};

Answer 3

Вы должны использовать делегирование событий вместо зацикливания и присоединения событий к каждой кнопке.Вот пример:

var keyboard = document.getElementById('keyboard');
var display = document.getElementById('display');

keyboard.addEventListener('click', function(ev) {
  var val = ev.target.id;
  if (ev.target.localName === 'button') {
    display.innerText += val;
  }
});

.calculator {
  width: 300px;
  
  background: whitesmoke;
}

#display {
  height: 50px;
  background: #d2d2d2;
  border: 1px solid #9c9c9c;
  margin: 10px auto 10px;
  font-size: 20px;
  line-height: 50px;
  padding: 0 10px;
}

#keyboard {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

button {
  font-size: 20px;
  
  padding: 20px;
  margin: 5px;
  
  cursor: pointer;
}

<div class="calculator">
  <div id="display" contenteditable="true" >
  
  </div>
  <div id="keyboard">
    <button id="0">0</button>
    <button id="1">1</button>
    <button id="2">2</button>
    <button id="3">3</button>
    <button id="4">4</button>
    <button id="5">5</button>
    <button id="6">6</button>
    <button id="7">7</button>
    <button id="8">8</button>
    <button id="9">9</button>
  </div>
</div>