JavaScript3x3柔性盒，按钮数量增加

Question

我有一个2 x 2，它使用flex属性，每个框内都有编号为的框，还有一个按钮可单击

​

function click() {
    var id = "item-";;
    for(var i = 1; i <= 6; i++) {
      id = id + i;
      var element = document.getElementById(id);
      var value = element.innerHTML;
      value++;
      document.getElementById(id).innerHTML = value;
    }     
}

<div class="flex-container">
  <div class="container-1">
    <div id="item-1">0</div>
    <div id="item-2">0</div>
    <div id="item-3">0</div>
  </div>
  <div class="container-2">
    <div id="item-4">0</div>
    <div id="item-5">0</div>
    <div id="item-6">0</div>
  </div>
</div>
<button class="btn" onclick="click()">Click</button>

​

我想要创建一个函数()，如果我单击一个按钮，框内的数字会增加，但不是所有框中的所有数字都会增加。我要一箱一箱地增加号码。

但是我的函数只增加了第一个框中的值。有人能告诉我我该怎么做吗？

Answer 1

目前，for ()的第一次迭代将工作，因为id将成为item-1，但是第二次迭代您将创建新的id，但您只是附加了i，所以它变成了item-12而不是item-2。

只需记住id，并在使用它时以item-作为前缀。然后每次按下后，更新innerHTML并增加计数器，如果我们刚刚更新了最后一个<div>，则将其重置为1

​

var currentIndex = 1;

function incrementButton() {
    let element = document.getElementById('item-' + currentIndex);
    element.innerHTML = ++element.innerHTML;
     
    currentIndex = (currentIndex === 6) ? 1 : ++currentIndex;
}

<div class="flex-container">
  <div class="container-1">
    <div id="item-1">0</div>
    <div id="item-2">0</div>
    <div id="item-3">0</div>
  </div>
  <div class="container-2">
    <div id="item-4">0</div>
    <div id="item-5">0</div>
    <div id="item-6">0</div>
  </div>
</div>
<button class="btn" onclick="incrementButton()">Click</button>

​