数字拆分div功能：多次点击提交重复拆分问题修复需求

问题根源 #

你的代码中res数组是全局变量，每次点击提交按钮时，新的拆分结果会追加到这个数组里，而不是重新生成新数组，导致旧数据和新数据混合，渲染出混乱的结果。

修复方案 #

把res数组的声明移到表单提交的事件处理函数内部，这样每次点击提交时都会重新创建一个空数组，从零开始计算拆分结果。

修改后的完整代码 #

let form = document.querySelector('form');
let cdiv = document.querySelector('#clr');
form.addEventListener('submit', event => {
  event.preventDefault();
  // 每次提交都重新初始化空数组
  let res = [];
  let num = Number(document.querySelector('#num').value);
  let sp = Number(document.querySelector('#split').value);
  
  if (num > 0) {
    if (sp > 0) {
      for (let i = 0; i < sp; i++) {
        res.push(Math.floor(num / sp));
      }
      let rem = num % sp;
      for (let i = 0; i < rem; i++) {
        res[i]++
      }
      cdiv.innerHTML = "";
      for (let i = 0; i < res.length; i++) {
        let color = "#9a5f2b"
        let colorDiv = document.createElement('div');
        colorDiv.style.backgroundColor = color;
        colorDiv.style.width = `${100 * res[i]}%`;
        colorDiv.style.height = '50px';
        colorDiv.style.margin = '5px';
        let text = document.createTextNode(`${res[i]}`);
        colorDiv.appendChild(text);
        cdiv.appendChild(colorDiv);
      }
    } else {
      let color = "#9a5f2b";
      let text = document.createTextNode("Error: both inputs should be greater than 0.");
      let colorDiv = document.createElement("div");
      colorDiv.style.padding = '5px';
      colorDiv.style.backgroundColor = color;
      colorDiv.appendChild(text);
      cdiv.innerHTML = "";
      cdiv.appendChild(colorDiv);
    }
  } else {
    let color = "#9a5f2b";
    let text = document.createTextNode("Error: both inputs should be greater than 0.");
    let colorDiv = document.createElement("div");
    colorDiv.style.padding = '5px';
    colorDiv.style.backgroundColor = color;
    colorDiv.appendChild(text);
    cdiv.innerHTML = "";
    cdiv.appendChild(colorDiv);
  }
});

额外优化建议 #

• 可以在计算前先验证输入是否为有效数字（比如排除NaN的情况），避免非数字输入导致逻辑出错。
• 样式可以通过CSS类统一管理，代替直接在JS中编写内联样式，让代码结构更清晰易维护。

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