将跨度值推送到数组

时间：2016-01-25 19:31:35

标签： javascript arrays calculator

我正在构建一个计算器，并希望让每个按钮将其值发送到名为＆＃34; storage＆＃34;的空数组。首先，我无法让我的代码运行每个按钮，我不知道为什么会这样。它只能在＃1按钮上运行。其次，我不确定如何将值发送到数组＆＃34;存储＆＃34;。我知道JS有一个.push（）;方法，但事情并不适合我。

拜托，没有JQuery，我想首先在普通的JS中获得良好的基础。

＆＃13;
＆＃13; 
// 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);*/
＆＃13; 
#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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

My code

5 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：2)

它处理所有键，计算数字与运算符，并且只附加一个事件监听器。

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

我将监听器附加到父节点，我们得到'clicked'跨度的内部HTML，并转换为整数。这些整数被推送到nums数组，它会在每次点击时打印出数组的当前值，你可以在这里或在听众之外用它们做些什么。

JSBin。 我在发布垃圾箱时失败了。 http://jsbin.com/wireboputu/1/edit?html,js,console,output

还要方便的是，其他实现会将侦听器附加到每个跨度，这有点混乱。这里我们只将一个附加到父项，并从事件对象中获取详细信息。

编辑：更改为运营商/号码的帐户。我的第一次尝试将在操作员键上返回undefined。我对此的原始标题并不像我的第一次实现那么简单，所以把它带走了。

答案 2 :(得分：1)

好开始

  

首先，我无法让我的代码为每个按钮运行，我不知道为什么会这样做

函数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)
  })
})

答案 3 :(得分：0)

<!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>
		  </div>
		  <button id="btn" onclick ="clickButton()">push values</button>
        </div>
		
		<script>
		var x = 0;
    var spanVal = document.getElementsByTagName("span");
    var storageArr = [];

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

		</script>
    </body>

    </html>

答案 4 :(得分：0)

您可以使用span创建按钮，其中innerHTML（跨度内的文本）是数字：

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

捕捉该按钮上的点击事件。

onclick='go()';

当该事件触发时，您可以使用event元素的id（btn1）将存储在span的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>

相关问题
最新问题