将跨度值推送到数组

Push span value to array

本文关键字：数组      更新时间：2023-09-26

我正在构建一个计算器，并希望让每个按钮将其值发送到名为"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>

我的代码

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

这将处理所有键，考虑数字与运算符，并且仅附加一个事件侦听器。

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，并转换为整数。这些 int 被推送到 nums 数组，它在每次单击时打印出数组的当前值，您可以在此处或侦听器之外对它们执行操作。

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

注意其他实现将侦听器附加到每个跨度也很方便，这有点混乱。在这里，我们只将一个附加到父对象，并从事件对象中获取详细信息。

编辑：更改为考虑操作员/数字。我的第一次尝试将在操作员键上返回未定义。而且我原来的标题并不像我的第一个实现那么简单，所以把它拿走了。

很好开始

首先，我无法为每个按钮运行我的代码，并且不确定为什么会这样

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


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

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

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

相关文章：