JavaScript实现多组货箱体积自动计算及求和问题求助

问题根源 #

你当前代码的核心问题是循环计算时，每次都会用新组的数据覆盖calVolumeResult变量，导致最终仅保留最后一组的计算值。要实现所有组结果的求和，只需通过累加变量或数组存储单组结果即可处理，无需提前固定变量数量。

修正后的代码 #

let button = document.querySelector(".btn");
let buttonReset = document.querySelector(".reset");
let buttonCalculate = document.querySelector(".calculate");

button.addEventListener("click", function() {
  const quantity = parseInt(document.querySelector("#myNumber").value);
  if (quantity > 0) {
    const calBox = document.querySelector(".calBox");
    calBox.innerHTML = ""; // 清空旧内容，避免重复生成输入框
    for (let i = 1; i <= quantity; i++) {
      // 给每组输入框添加独立容器，方便后续按组取值
      const groupHtml = `<div class="box-group" data-group="${i}">
        <h4>第${i}组货箱</h4>
        <p class='first'>长 : <input type='number' class='box-input' data-type="length" value='' min="0" /></p>
        <p class='first'>高 : <input type='number' class='box-input' data-type="height" value='' min="0" /></p>
        <p class='first'>宽 : <input type='number' class='box-input' data-type="width" value='' min="0" /></p>
        <p class='first'>总箱数 : <input type='number' class='box-input' data-type="count" value='' min="0" /></p>
        <p class="group-result"></p>
      </div>`;
      calBox.innerHTML += groupHtml;
    }
    document.querySelector(".resetDiv").style.display = "flex";
    button.disabled = true;
  }
});

buttonReset.addEventListener("click", function() {
  location.reload(true);
});

buttonCalculate.addEventListener("click", function() {
  const quantity = parseInt(document.querySelector("#myNumber").value);
  if (quantity <= 0) return;

  // 初始化总和变量
  let totalVolumeWeight = 0;
  let totalCBM = 0;
  const allGroups = document.querySelectorAll(".box-group");

  allGroups.forEach(group => {
    // 读取当前组的输入值，处理空值/非数字情况
    const length = parseInt(group.querySelector("[data-type='length']").value) || 0;
    const height = parseInt(group.querySelector("[data-type='height']").value) || 0;
    const width = parseInt(group.querySelector("[data-type='width']").value) || 0;
    const boxCount = parseInt(group.querySelector("[data-type='count']").value) || 0;

    // 计算单组结果
    const groupVolume = (length * height * width) * boxCount;
    const groupVolumeWeight = groupVolume / 6000;
    const groupCBM = groupVolumeWeight * 0.006;

    // 显示单组计算结果
    group.querySelector(".group-result").innerHTML = 
      `单组体积重量: ${groupVolumeWeight.toFixed(2)}kg | 单组CBM: ${groupCBM.toFixed(4)}`;

    // 累加到总和
    totalVolumeWeight += groupVolumeWeight;
    totalCBM += groupCBM;
  });

  // 输出最终总和
  document.querySelector(".volumeResult").innerHTML = `总重量: ${totalVolumeWeight.toFixed(2)}kg`;
  document.querySelector(".cbmVolume").innerHTML = `总CBM: ${totalCBM.toFixed(4)}`;
});

关键改进说明 #

• 累加变量替代单次赋值：初始化totalVolumeWeight和totalCBM为0，循环中把每组计算结果累加到这两个变量，最终得到所有组的总和。
• 分组DOM结构优化：用容器包裹每组输入框，搭配data-*属性标记输入类型，无需依赖second1这类动态类名，代码更健壮。
• 输入容错处理：通过|| 0处理空输入或非数字值，避免出现NaN计算错误。
• 新增单组结果显示：让用户能直观看到每组的计算结果，提升体验。
• 变量规范化：用let替代var，避免循环变量泄漏问题。

内容的提问来源于stack exchange，提问作者Learner-Xdot