[英]iterating across multiple buttons using key value pairs array to add event listeners with loops
我正在研究一个简单的计算器项目
我试图自动将事件监听器添加到各种数字按钮(1-9)。
事件侦听器将侦听按钮上的单击事件,从而导致HTML的显示部分发生更改(class = .display)
键值对是b1-b9,包含各种相应的值。
我想出了下面的FOR EACH循环。 由于某种原因,它会导致所有数字按钮应用数字9; 我认为这是每个循环的原因。
我不确定如何解决它。 我还提出了一个替代FOR循环,导致另一个问题。 对[Properties [i]]。toString()返回undefined。
有趣的是,如果我将对[Properties [i]]。toString()交换到i,那么就会发生SAME问题
帮助真的很感谢,谢谢你..
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”添加到计算器的当前字符串,依此类推。
您应该使用事件委派而不是循环并将事件附加到每个按钮。 这是一个例子:
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>
我会这样做,但这不是我猜的唯一一个,可能有更好的方法。
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属性的名称,在这种情况下,使用id更好地显示HTML +中的任何内容,因为它是一个独特的元素,不能是错误,类不是)并且不是很准确(因为我写了一个正确的constante名称谁有一些意义而不是对谁意味着什么都没有^^)。
我没有将代码自动化为循环,但这是你脚本中的简单部分。
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"
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.