將跨距值推送到數組

我正在構建一個計算器，並希望每個按鈕都將其值發送到名爲「storage」的空數組。首先，我不能讓我的代碼運行每個按鈕，我不知道這是爲什麼。它只在＃1按鈕上運行。其次，我不確定如何去將值發送到數組「存儲」。我知道JS有一個.push（）;方法，但事情不適合我。將跨距值推送到數組

請不要JQuery，我想先在普通的JS中獲得一個良好的基礎。

// Click on button and have number saved in array for later use 
 
var spanVal = document.getElementsByClassName("num"); 
 
var storage = []; 
 

 
function clickButton() { 
 
    var key = document.querySelector(".num"); 
 
    key.onclick = logVal; 
 
} 
 

 
function logVal() { 
 
    for (var i = 0; i < spanVal.length; i++) { 
 
    console.log(spanVal[i].innerHTML); 
 
    } 
 
} 
 

 
clickButton(); 
 

 
/*storage.push(); 
 
console.log(storage);*/

#calculator { 
 
    max-width: 250px; 
 
} 
 
.keys span { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 5px; 
 
    float: left; 
 
    margin: 8px; 
 
    font: bold 20px Arial, sans-serif; 
 
    text-align: center; 
 
} 
 
.grey { 
 
    background-color: grey; 
 
} 
 
.blue { 
 
    background-color: aqua; 
 
} 
 
.screen { 
 
    width: 180px; 
 
    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="keys"> 
 
     <div class="screen"></div> 
 
     <span class="num grey">1</span> 
 
     <span class="num blue">2</span> 
 
     <span class="num grey">3</span> 
 
     <span class="num blue">4</span> 
 
     <span class="num grey">5</span> 
 
     <span class="num blue">6</span> 
 
     <span class="num grey">7</span> 
 
     <span class="num blue">8</span> 
 
     <span class="num grey">9</span> 
 
     <span class="num blue">0</span> 
 
     <span class="num grey operator">+</span> 
 
     <span class="num blue operator">-</span> 
 
     <span class="num grey operator">/</span> 
 
     <span class="num blue operator">*</span> 
 
     <span class="num grey operator">AC</span> 
 
    </div> 
 
    </div> 
 
</head> 
 

 
<body> 
 

 
</body> 
 

 
</html>

My code

來源

2016-01-25 CrystalH

還在學習如何使用SO。剛剛做到了！ :) – CrystalH

'querySelector'只返回'clickButton'中第一個找到的元素，你需要'querySelectorAll'，然後在附加onclicks時遍歷返回的集合。 – Teemu

很好的開始

首先，我不能讓我的代碼爲每個按鈕來運行，我不知道爲什麼，這是

document.querySelector返回單個項功能。如果查詢找到多個，它將返回第一個。您可能想要使用document.querySelectorAll，迭代結果，並使用addEventListener

第二個問題可以通過推入onclick處理程序中的存儲陣列來解決。

編輯：因爲查詢返回一個節點列表，而不是陣列中，使用一個for循環迭代，代替forEach功能

最終結果將是這樣的：

var calcKeys = document.querySelectorAll('.num') 
for (var i = 0; i < calcKeys.length; i++){ 
    calcKeys[i].addEventListener('click', function(e){ 
    storage.push(e.target.innerHTML) 
    }) 
})

來源

2016-01-25 19:42:22 PhilVarg

當使用querySelectorAll（）時，應該在類名周圍引用類似.querySelector（）;? – CrystalH

是的。我已將其編輯爲清晰度 – PhilVarg

謝謝！這也似乎是我得到一個錯誤，說.forEach不是一個函數。我該如何糾正這種情況？ ** [新代碼]（http://jsbin.com/posayi/edit?html,js,console,output）** – CrystalH

document.getElementsByClassName返回一個HTML集合。您需要迭代集合中的每個元素並將該函數添加到每個鍵。

document.querySelector僅返回第一個元素。您需要使用document.querySelectorAll並遍歷數組。

返回文檔內的第一元件（使用文檔的節點的深度優先前序遍歷|通過在文檔標記第一元件和由子節點的數量的順序通過連續的節點迭代）匹配指定選擇器組。

var numbers = document.getElementsByClassName("num"); 
var storage = [];

你已經在數量上定義的集合。您可以簡單地使用forEach方法迭代數字。沒有必要創建一個單獨的鍵變量。集合已經存在。

numbers.forEach(function(number) { 
    number.addEventListener("click", function() { 
     storage.push(number.innerHTML); 
    }); 
});

來源

2016-01-25 19:41:02

大部分情況下，我理解代碼，但是，我不認爲我正確使用了document.querySelectorAll。我也收到錯誤說.forEach不是一個函數。 ** [鏈接]（http://jsbin.com/yeqiwa/edit?html,js,console,output）**。 – CrystalH

這處理所有的鍵，佔數字與運算符，只附加一個事件監聽器。

var nums = []; 
var operators = []; 

document 
    .querySelector('.keys') 
    .addEventListener('click', function(e) { 
    var key = e.target.innerHTML 
    if (! isNaN(Number(key))) { 
     nums.push(Number(key)); 
    } else { 
     operators.push(key); 
    } 

    console.log('Nums:', nums); 
    console.log('Operators:', operators); 
});

我重視聽者的父節點，我們得到的「點擊」跨度內HTML，鑄造爲整數。這些整數被推入到nums數組中，並且它在每次單擊時打印出數組的當前值，您可以在這裏或在偵聽器之外進行操作。

JSBin。我很難在發佈箱。 http://jsbin.com/wireboputu/1/edit?html,js,console,output

它也很方便地注意到，其他實現將偵聽器附加到每個跨度，這是一種混亂。在這裏，我們只附加一個父項，並從事件對象中獲取細節。

編輯：更改爲帳戶的運營商/數字。我的第一次嘗試將返回未定義的操作員鍵。而我原來的標題並不像我第一次執行那麼簡單，所以就把它拿走了。

來源

2016-01-25 19:41:08

<!DOCTYPE html> 
 
    <html> 
 

 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width"> 
 
    
 
    <style> 
 
    #calculator { 
 
     max-width: 250px; 
 
    } 
 
    .keys span { 
 
     width: 50px; 
 
     height: 50px; 
 
     border-radius: 5px; 
 
     float: left; 
 
     margin: 8px; 
 
     font: bold 20px Arial, sans-serif; 
 
     text-align: center; 
 
    } 
 
    .grey { 
 
     background-color: grey; 
 
    } 
 
    .blue { 
 
     background-color: aqua; 
 
    } 
 
    .screen { 
 
     width: 180px; 
 
     height: 40px; 
 
     border-radius: 3px; 
 
     background-color: #ccc; 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
<div id="calculator"> 
 
     <div class="keys"> 
 
      <div class="screen"></div> 
 
      <span class="num grey">1</span> 
 
      <span class="num blue">2</span> 
 
      <span class="num grey">3</span> 
 
      <span class="num blue">4</span> 
 
      <span class="num grey">5</span> 
 
      <span class="num blue">6</span> 
 
      <span class="num grey">7</span> 
 
      <span class="num blue">8</span> 
 
      <span class="num grey">9</span> 
 
      <span class="num blue">0</span> 
 
      <span class="num grey operator">+</span> 
 
      <span class="num blue operator">-</span> 
 
      <span class="num grey operator">/</span> 
 
      <span class="num blue operator">*</span> 
 
      <span class="num grey operator">AC</span> 
 
\t \t </div> 
 
\t \t <button id="btn" onclick ="clickButton()">push values</button> 
 
     </div> 
 
\t \t 
 
\t \t <script> 
 
\t \t var x = 0; 
 
    var spanVal = document.getElementsByTagName("span"); 
 
    var storageArr = []; 
 

 
    function clickButton() { 
 
    storageArr.push(spanVal[x].innerHTML) 
 
\t x++; 
 
\t alert(storageArr) 
 
    } 
 

 
\t \t </script> 
 
    </body> 
 

 
    </html>

來源

2016-01-25 19:50:51 hypemichael

您可以使用span來創建帶有innerHTML（span中的文本）爲數字的按鈕r：

<span id='btn1' class=number>1</span>

捕獲該按鈕上的單擊事件。

onclick='go()';

當該事件觸發時，您可以使用事件元素的ID（BTN1）推送存儲在跨度的innerHTML值到您的數組：

storage.push(document.getElementById(el).innerHTML);

您可以添加任意數量的跨度對你的號碼或按鈕的其餘部分：

<span id=btn2 class=number>2</span>

這裏有一個工作示例：

<html> 
<head> 
    <style> 
     div { 
      text-align:center; 
      padding:5px; 


     } 

    .number { 
     cursor:pointer; 
     width:30px; 
     height:30px; 
     background-color:silver; 
     border: solid 1px black; 
     text-align:center; 
     padding:5px; 
     margin:3px; 
    } 
    </style> 

    <script> 
     var storage = []; //this is your empty array called storage 
     document.addEventListener('click' , function(e){go(e)}); // i'm trapping the click event for my button 

     function go(e){ 
      var el = e.target.id; // get the event element's id 

      storage.push(document.getElementById(el).innerHTML); // use that id to obtain the element with that id's document object reference and push it's innerHTML (or you could use another property on that object for this) and push it to the storage array. 

      console.log(storage); //display the storage array in the console window 
     } 
    </script> 
</head> 
<body> 

    <div> 
     <span id='btn1' class='number'>1</span> 
     <span id='btn2' class='number'>2</span> 
     <span id='btn3' class='number'>3</span> 
    </div> 
    <div> 
     <span id='btn4' class='number'>4</span> 
     <span id='btn5' class='number'>5</span> 
     <span id='btn6' class='number'>6</span> 
    </div> 
    <div> 
     <span id='btn7' class='number'>7</span> 
     <span id='btn8' class='number'>8</span> 
     <span id='btn9' class='number'>9</span> 
    </div> 
    <div> 
     <span id='btn0' class='number'>0</span> 
</body>

來源

2016-01-25 20:32:19 steveben

將跨距值推送到數組

回答

相關問題