Flexbox布局下JavaScript按钮逐框递增数字问题求助

核心思路 #

通过维护一个当前目标盒子的索引变量，每次点击按钮时更新对应索引盒子的数值，之后索引自增（超出范围后重置为0，实现循环递增）。

完整代码实现 #

HTML结构

<div class="container">
  <div class="box">0</div>
  <div class="box">0</div>
  <div class="box">0</div>
  <div class="box">0</div>
  <div class="box">0</div>
  <div class="box">0</div>
</div>
<button onclick="click()">逐框递增</button>

CSS布局（flex实现）

.container {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}
.box {
  width: 80px;
  height: 80px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

JavaScript逻辑

// 全局变量记录当前要更新的盒子索引，初始指向第一个盒子
let currentIndex = 0;

function click() {
  // 获取所有盒子元素集合
  const boxes = document.querySelectorAll('.box');
  // 索引超出盒子总数时重置为0，实现循环递增
  if (currentIndex >= boxes.length) {
    currentIndex = 0;
  }

  // 取出当前盒子的数值，转成数字后加1
  const currentNum = parseInt(boxes[currentIndex].textContent);
  boxes[currentIndex].textContent = currentNum + 1;

  // 索引自增，下次点击更新下一个盒子
  currentIndex++;
}

问题原因说明 #

你之前的代码只更新第一个盒子，大概率是因为每次点击都直接选择了第一个盒子（比如用document.querySelector('.box')只会返回第一个匹配元素），或者没有维护索引变量来切换目标盒子。通过currentIndex跟踪当前要操作的盒子，每次点击后切换索引，就能实现逐个递增的效果。

内容的提问来源于stack exchange，提问作者Jacky