前端开发求助：编辑班级时如何实现积分累加而非覆盖？

问题 #

开发积分系统时，用户可通过addPointsBtn添加积分项，新增班级时积分能正确关联对应班级并计算总和；但进入编辑状态后添加新积分，原有积分会被覆盖，无法实现累加效果。无需关注form-container的积分展示形式，只需保证编辑时积分不被覆盖。

核心问题 #

1. 编辑提交时直接用新创建的对象完全替换原有班级数据，且新对象的积分仅计算当前表单输入的总和，没有累加原有积分。
2. 进入编辑状态时未还原原有积分对应的输入项，用户看不到历史积分，新增积分会被当作全部积分计算。

解决方案 #

1. 编辑时还原原有积分输入项 #

修改editPointForm函数，在进入编辑状态时清空现有积分项并重新创建包含原有总积分的输入框，让用户能看到历史积分并追加新项：

const editPointForm = (button) => {
  const dataArrIndex = cgFormData.findIndex(item => item.id === button.parentElement.id);
  pointFormData = cgFormData[dataArrIndex];

  // 清空现有积分项
  const removePointAssignmentDiv = document.querySelectorAll('.point-assignment');
  removePointAssignmentDiv.forEach(div => div.remove());

  // 创建输入项填充原有总积分
  const createAssignmentDiv = document.createElement("div");
  createAssignmentDiv.className = "point-assignment";
  
  const createNameLabel = document.createElement("label");
  createNameLabel.textContent = "Name (Optional): ";
  
  const createNameInput = document.createElement("input");
  createNameInput.type = "text";
  
  const createPointInput = document.createElement("input");
  createPointInput.type = "number";
  createPointInput.placeholder = "Points Received";
  createPointInput.className = "point-input";
  createPointInput.value = pointFormData.points; // 填充原有积分
  
  createAssignmentDiv.appendChild(createNameLabel);
  createAssignmentDiv.appendChild(createNameInput);
  createAssignmentDiv.appendChild(createPointInput);
  pointText.insertAdjacentElement("beforeend", createAssignmentDiv);

  // 填充其他班级设置字段
  nameInput.value = pointFormData.name;
  PointAMinNum.value = pointFormData.PointAMinNum;
  PointAMaxNum.value = pointFormData.PointAMaxNum;
  PointBMinNum.value = pointFormData.PointBMinNum;
  PointBMaxNum.value = pointFormData.PointBMaxNum;
  PointCMinNum.value = pointFormData.PointCMinNum;
  PointCMaxNum.value = pointFormData.PointCMaxNum;
  PointDMinNum.value = pointFormData.PointDMinNum;
  PointDMaxNum.value = pointFormData.PointDMaxNum;
  PointFMinNum.value = pointFormData.PointFMinNum;
  PointFMaxNum.value = pointFormData.PointFMaxNum;

  nextBtn.innerText = "Update";
  nextBtn.type = "submit";

  addCurrentGradeClassBtn.classList.add("hidden");
  cgFormContainer.classList.add("hidden");
  pointGradeForm.classList.remove("hidden");
  cgNameInput.classList.remove("hidden");
};

2. 提交更新时累加积分 #

修改addOrUpdatePointsForm函数，更新班级时将原有积分与当前表单输入的新积分相加，而非直接覆盖：

const addOrUpdatePointsForm = () => {
  const dataArrIndex = cgFormData.findIndex(item => item.id === pointFormData.id);

  const pointAdd = document.querySelectorAll(".point-input");
  let newPoints = 0;
  pointAdd.forEach(input => {
    const getValue = parseFloat(input.value);
    if (!isNaN(getValue)) {
      newPoints += getValue;
    };
  });

  let cgFormObj;
  if (dataArrIndex === -1) {
    // 新增班级：直接使用新计算的积分
    cgFormObj = {
      id: `${nameInput.value.toLowerCase().split(" ").join("-")}`,
      name: nameInput.value,
      PointAMinNum: PointAMinNum.value,
      PointAMaxNum: PointAMaxNum.value,
      PointBMinNum: PointBMinNum.value,
      PointBMaxNum: PointBMaxNum.value,
      PointCMinNum: PointCMinNum.value,
      PointCMaxNum: PointCMaxNum.value,
      PointDMinNum: PointDMinNum.value,
      PointDMaxNum: PointDMaxNum.value,
      PointFMinNum: PointFMinNum.value,
      PointFMaxNum: PointFMaxNum.value,
      points: newPoints,
    };
    cgFormData.push(cgFormObj);
  } else {
    // 更新班级：累加原有积分与新输入的积分
    const existingItem = cgFormData[dataArrIndex];
    cgFormObj = {
      ...existingItem,
      name: nameInput.value,
      PointAMinNum: PointAMinNum.value,
      PointAMaxNum: PointAMaxNum.value,
      PointBMinNum: PointBMinNum.value,
      PointBMaxNum: PointBMaxNum.value,
      PointCMinNum: PointCMinNum.value,
      PointCMaxNum: PointCMaxNum.value,
      PointDMinNum: PointDMinNum.value,
      PointDMaxNum: PointDMaxNum.value,
      PointFMinNum: PointFMinNum.value,
      PointFMaxNum: PointFMaxNum.value,
      points: existingItem.points + newPoints, // 累加积分
    };
    cgFormData[dataArrIndex] = cgFormObj;
  };

  alert(`Points: ${cgFormObj.points}`);
  updateFormContainer();
  pointReset();
};

进阶优化建议（可选） #

如果需要保留单个积分项的历史记录（而非仅保存总积分），建议修改数据结构，在班级对象中添加pointItems数组存储每个积分项的名称和分数，总积分通过数组求和计算。示例：

// 新增班级时的对象结构
cgFormObj = {
  id: "math-class",
  name: "Math",
  // ...其他分级设置字段
  pointItems: [
    { name: "Midterm", points: 95 },
    { name: "Homework", points: 88 }
  ],
  points: 183 // 可通过 pointItems.reduce((sum, item) => sum + item.points, 0) 计算
};

这种结构下，编辑时可以还原所有历史积分项，支持用户修改、删除单个项，积分计算更灵活。

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