复选框取消选中时重置API返回值致订单总价计算错误

• 已实现基础点餐计费功能：支持餐品复选框选择、小费选项选择，选中/取消选项时自动增减并展示订单总价，基础计算逻辑运行正常。
• 对接配送费计算API后出现异常：用户填写配送地址完成配送费计算、配送费计入总价后，若选中再取消任意餐品/小费选项，总价会被重置，不再包含已算出的配送费。

异常复现流程 #

1. 选中价值$10的餐品、$5的小费，此时总价正确显示为$15
2. 提交配送地址调用API，返回$7配送费，此时总价正确显示为$22（15美元餐品小费总额+7美元配送费）
3. 取消选中之前选的$10餐品，总价直接从$22跳转为仅小费金额$5，虽然页面配送费字段仍显示$7，但总价计算未将配送费纳入。

现有配送费计算代码 #

async function getFee() {
  const payload = getFormValues();
  const finalPayload = JSON.stringify(payload);

  const formInput = document.querySelector("form");
  console.log(formInput);

  if (formInput.checkValidity()) {
    console.log("YES");

    const response = await fetch("/get-fee", {
      method: "POST",
      body: finalPayload,
      headers: { "Content-Type": "application/json" },
    })
      .then(async (response) => {
        const resp = await response.json();
        return resp;
      })
      .catch((rejected) => {
        console.log(rejected);
      });

    const deliveryField = document.getElementById("fee");
    const orderTotal = document.getElementById("total");
    tipVal = document.querySelector(".tips:checked").value;
    window.tips = tipVal;

    foodTotal.textContent = `$${(window.menuItems / 100).toFixed(2)}`;
    tipTotal.textContent = `$${(window.tips / 100).toFixed(2)}`;
    deliveryField.innerHTML = `$${(response.fee / 100).toFixed(2)}`;
    orderTotal.textContent = `$${(
      (Number(window.menuItems) + Number(window.tips) + response.fee) /
      100
    ).toFixed(2)}`;
  } else {
    console.log("You need to fill out the form");
  }

}

API返回的response.fee是getFee函数内的局部变量，仅在API请求成功的那次函数执行中被用于计算总价，负责监听复选框、小费选项变化的重算逻辑无法持久获取到这个配送费值，因此用户操作选项触发重算时，只会累加餐品和小费金额，漏掉配送费，导致计算错误。

核心逻辑是将API返回的配送费存储到全局可访问的作用域，让所有总价计算逻辑都能读取到最新的配送费值，统一计算规则，避免局部变量丢失导致的计算错误。
具体实现步骤：

• 全局初始化配送费变量
  在所有JS逻辑的最外层（不要写在任意函数内部）声明变量，默认值设为0（对应未计算配送费的状态），该变量可被同一页面下的所有JS文件访问：

  window.deliveryFee = 0;
  

• 修改getFee函数的赋值逻辑
  API请求成功拿到配送费后，将值赋给全局变量，替代原来仅使用局部变量response.fee的逻辑：

  // 在deliveryField渲染逻辑后添加
  window.deliveryFee = response.fee;
  

• 统一所有场景下的总价计算规则
  找到监听复选框、小费选项change事件的重算逻辑，将总价计算公式修改为累加餐品总额、小费、全局存储的配送费三个值，和getFee函数内的计算规则保持一致：

  orderTotal.textContent = `$${(
    (Number(window.menuItems) + Number(window.tips) + window.deliveryFee) / 100
  ).toFixed(2)}`;
  

• 可选优化：抽离独立的总价计算函数，在API请求成功、选项变更、地址修改等所有需要更新总价的场景直接调用该函数，避免多处写相同计算逻辑导致的规则不一致问题。

注意：如果用户修改配送地址重新计算配送费，只需要更新window.deliveryFee的值后触发一次总价重算即可，无需额外调整其他逻辑。

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