[英]Calculator clear button
我正在尝试为计算器添加一个清除按钮。 我希望它将数组重置为空,即storage.length = 0;。 但是,我无法让我的AC钥匙做任何事情……我试图让它发出警报“嗨”,但无济于事。 我是新手,所以我迷失了atm。
/* Click on button and have number saved in array for later use*/ var calcKeys = document.querySelectorAll('.num'); var storage = ['1']; function addClick(node) { node.addEventListener('click', function(e) { storage.push(e.target.innerHTML); console.log(storage); if(calcKeys.innerHTML === 'AC') { alert("hi"); /*storage.length = 0;*/ } }); } for (var i = 0; i < calcKeys.length; i++) { addClick(calcKeys[i]); } // when user clicks AC button, clear array // get node by defining AC key console.log(storage);
#calculator{ width: 100%; height: 100%; background-color: rgba(0, 0, 255, 0.1); display: flex; flex-direction: column; align-items: center; padding-top: 10px; } .keys { display: flex; justify-content: space-around; width: 100%; flex-wrap: wrap; max-width: 250px; } .keys span { padding: 20px; border-radius: 5px; margin: 8px; font: bold 20px Arial, sans-serif; display: flex; align-items: center; background-color: grey; } .keys span:nth-child(odd) { background-color: aqua; } .screen { width: 95%; height: 40px; border-radius: 3px; background-color: #ccc; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <div id="calculator"> <div class="screen"></div> <div class="keys"> <span class="num">1</span> <span class="num">2</span> <span class="num">3</span> <span class="num">4</span> <span class="num">5</span> <span class="num">6</span> <span class="num">7</span> <span class="num">8</span> <span class="num">9</span> <span class="num">0</span> <span class="num operator plus">+</span> <span class="num operator minus">-</span> <span class="num operator divide">/</span> <span class="num operator times">*</span> <span class="num operator ac">AC</span> </div> </div> </head> <body> </body> </html>
问题出在这里:
function addClick(node) {
node.addEventListener('click', function(e) {
storage.push(e.target.innerHTML);
console.log(storage);
/* Here */
if(calcKeys.innerHTML === 'AC') {
alert("hi");
/*storage.length = 0;*/
}
});
}
您购买的是calcKeys,而不是当前的密钥,因此您必须对此进行更正:
function addClick(node) {
node.addEventListener('click', function(e) {
storage.push(e.target.innerHTML);
console.log(storage);
if(e.target.innerHTML === 'AC') {
alert("hi");
/*storage.length = 0;*/
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.