Кнопка очистки калькулятора

Я пытаюсь добавить кнопку очистки в свой калькулятор. Я хочу, чтобы он сбросил массив до нуля, т. Е. 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>

источник

2016-01-27 CrystalH

Проблема заключается здесь:

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;*/ 
     } 
    });

}

источник

2016-01-27 00:22:46 dexhering

ok, получил это, чтобы использовать предупреждение, теперь я застрял в получении хранилища, чтобы сбросить ни к чему. ** [новый код] (http://jsbin.com/soxexe/edit?html,js,console,output) ** – CrystalH

Это потому, что вы печатаете на консоли перед очисткой переменной «хранение» Изменить этот код if (e.target.innerHTML === 'AC') { // alert ("hi"); storage.length = 0; } console.log (хранилище); – dexhering

Кнопка очистки калькулятора

ответ

Смежные вопросы