如何从长度为5的数组取数并转为5个DIV内的对应数量盒子堆叠

核心问题修正与实现优化 #

针对你需要实现的5个独立分区对应数值堆叠盒子的需求，原代码存在分区缺失、数据累积、逻辑失效等问题，以下是修复后的完整代码及修改说明：

修改后的完整代码 #

HTML #

<div class="mainContainer">
  <div class="formContainer">
    <div class="formTitle">How many boxes ?</div>
    <div class="inputZone">
      <input type="number" class="qty-input" min="0">
      <input type="number" class="qty-input" min="0">
      <input type="number" class="qty-input" min="0">
      <input type="number" class="qty-input" min="0">
      <input type="number" class="qty-input" min="0">
    </div>
    <div class="buttonZone">
      <button id="qtyButton">Go</button>
    </div>
  </div>
  <div id="resultContainer">
    <!-- 5个独立分区将通过JS动态生成 -->
  </div>
</div>

CSS #

* {
  box-sizing: border-box;
  margin: 0;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 1050px;
  margin: auto;
}

.formContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 25%;
  border: 2px solid red;
  justify-content: space-evenly;
}

.buttonZone {
  display: flex;
  justify-content: center;
}

.formTitle {
  display: flex;
  justify-content: center;
}

.inputZone {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

#resultContainer {
  display: flex;
  border: 2px solid blue;
  width: 100%;
  height: 25%;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  border: 1px solid grey;
  padding: 5px;
}

.compart {
  width: 20px;
  height: 20px;
  margin: 2px 0;
}

.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.yellow { background-color: yellow; }
.pink { background-color: pink; }

JavaScript #

const button = document.querySelector('#qtyButton');
const resultContainer = document.querySelector('#resultContainer');
const colorClasses = ['red', 'blue', 'green', 'yellow', 'pink'];

// 初始化创建5个独立堆叠分区
function initStacks() {
  resultContainer.innerHTML = '';
  for (let i = 0; i < 5; i++) {
    const stack = document.createElement('div');
    stack.classList.add('stack');
    resultContainer.appendChild(stack);
  }
}

// 根据输入值渲染对应数量的盒子
function renderBoxes(quantities) {
  const stacks = document.querySelectorAll('.stack');
  stacks.forEach((stack, index) => {
    stack.innerHTML = ''; // 清空上一次的渲染结果
    const qty = parseInt(quantities[index]) || 0;
    for (let b = 0; b < qty; b++) {
      const box = document.createElement('div');
      box.classList.add('compart', colorClasses[index]);
      stack.appendChild(box);
    }
  });
}

// 按钮点击事件逻辑
button.addEventListener('click', function() {
  const inputs = document.querySelectorAll('.qty-input');
  const quantities = Array.from(inputs).map(input => input.value);
  renderBoxes(quantities);
});

// 页面加载完成后初始化分区
window.addEventListener('load', initStacks);

关键修改说明 #

• 独立分区实现：

  1. 移除原HTML中单个的.stack，通过JS动态创建5个独立分区，每个分区对应一个输入框
  2. 修改.stack的CSS为垂直堆叠布局，并从底部开始排列，贴合“堆叠”的视觉逻辑

• 数据与逻辑优化：

  1. 统一使用.qty-input类选择输入框，避免逐个选择的冗余代码
  2. 每次点击时清空分区内旧盒子，防止重复渲染累积
  3. 将输入值转为整数，处理空输入/非数字情况，默认显示0个盒子
  4. 通过索引绑定颜色类，替代原switch判断，避免变量覆盖导致的逻辑失效

• 用户体验优化：
  给输入框添加min="0"属性，禁止输入负数

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