繁体   English   中英

计算器清除按钮

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM