将跨度值推送到数组

Question

我正在构建一个计算器并希望每个按钮都将其值发送到名为 "storage" 的空数组。首先，我无法将每个按钮的代码设为运行，我不确定这是为什么。它只是运行ning 在 #1 按钮上。其次，我不确定如何将值发送到数组 "storage"。我知道 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

Answer 1

document.getElementsByClassName returns 一个 HTML 集合。您需要遍历集合中的每个元素并将函数添加到每个键。

document.querySelector returns 只有第一个元素。您需要使用 document.querySelectorAll 并遍历数组。

Returns the first element within the document (using depth-first pre-order traversal of the document's nodes|by first element in document markup and iterating through sequential nodes by order of amount of child nodes) that matches the specified group of selectors.

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

您已经定义了一个数字集合。您可以使用 forEach 方法简单地遍历数字。无需创建单独的键变量。该集合已存在。

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

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

我将侦听器附加到 parent 节点，我们正在获取 'clicked' 跨度的内部 HTML，并转换为整数。这些整数被推送到 nums 数组，它会在每次点击时打印出数组的当前值，您可以在这里或在侦听器之外使用它们。

JSBin。我在张贴垃圾箱方面非常失败。 http://jsbin.com/wireboputu/1/edit?html,js,console,output

还需要注意的是，其他实现为每个跨度附加了一个侦听器，这有点混乱。这里我们只附加一个到 parent，并从事件中获取详细信息 object.

编辑：更改为考虑运算符/数字。我的第一次尝试是 return undefined on operator keys。而且我这个的原标题不像我第一个实现的那么简单，所以就拿走了。

Answer 3

好的开始

First of all, I can't get my code to run for each button and am not sure why this is

函数 document.querySelector return 是单个项目。如果查询找到多个，它将 return 第一个。您可能想要使用 document.querySelectorAll、遍历结果并使用 addEventListener

第二个问题可以通过推送到 onclick 处理程序内的存储数组来解决。

编辑：因为查询 return 是一个节点列表，而不是数组，所以使用 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)
  })
})

Answer 4

<!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>

Answer 5

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

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

在该按钮上捕获点击事件。

onclick='go()';

当该事件触发时，您可以使用事件元素的 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>

将跨度值推送到数组

Push span value to array

javascript

arrays

calculator