点击表单计算按钮无刷新不显示结果，刷新后正常的问题排查

页面加载时就提前获取了所有表单输入值，此时用户还未填写内容，这些值都是初始空值或默认值。点击计算按钮时，代码使用的仍是页面加载时的旧值，而非用户刚输入的新值；刷新页面后浏览器会保留之前的输入内容，此时页面加载时获取到的是缓存的输入值，所以点击计算能正常显示结果。

"use strict";

const btnCalculate = document.querySelector("#submit");
const btnClear = document.querySelector("#clear");
const nameSlip = document.querySelector(".name");
const grossSalary = document.querySelector(".gross-salary");
const sumOfAdditions = document.querySelector(".total-additions");
const sumOfDeductions = document.querySelector(".total-deductions");
const netSalary = document.querySelector(".final-salary");
const myForm = document.querySelector("form"); // 改为获取form元素，方便重置

function addition(bonus, allowance) {
  return Number(bonus) + Number(allowance);
}

function deduction(ei, cpp) {
  return (Number(ei) + Number(cpp)) / 100;
}

function genderDeduction(selectGender) {
  return selectGender === "Female" ? 0.01 : 0; // 将null改为0，避免计算NaN
}

function dependentDeduction(selectDependent) {
  switch(selectDependent) {
    case "1":
      return 0;
    case "2":
      return 0.02;
    case "3":
      return 0.04;
    default:
      return 0;
  }
}

function incomeTaxDeduction(incomeTax) {
  return Number(incomeTax) / 100;
}

function finalSalary(grossPay, additions, deductions) {
  return Number(grossPay) + additions - deductions;
}

btnCalculate.addEventListener("click", (e) => {
  e.preventDefault();
  // 点击时才获取最新的输入值
  const employeeName = document.querySelector("#input-name").value;
  const grossPay = document.querySelector("#input-pay").value;
  const bonus = document.querySelector("#input-bonus").value;
  const allowance = document.querySelector("#input-allowance").value;
  const incomeTax = document.querySelector("#input-tax").value;
  const ei = document.querySelector("#input-ei").value;
  const cpp = document.querySelector("#input-cpp").value;
  const selectGender = document.querySelector('input[name="gender"]:checked').value;
  const selectDependent = document.querySelector('input[name="dependent"]:checked').value;

  // 用最新值计算各项结果
  const totalAdditions = addition(bonus, allowance);
  const totalDeductions = Number(
    grossPay * deduction(ei, cpp) +
    grossPay * (
      incomeTaxDeduction(incomeTax) -
      genderDeduction(selectGender) -
      dependentDeduction(selectDependent)
    )
  ).toFixed(2);

  // 更新薪资条内容
  nameSlip.innerText = employeeName;
  grossSalary.innerText = `$ ${grossPay}`;
  sumOfAdditions.innerText = `$ ${totalAdditions}`;
  sumOfDeductions.innerText = `$ ${totalDeductions}`;
  netSalary.innerText = `$ ${finalSalary(grossPay, totalAdditions, totalDeductions).toFixed(2)}`;
});

// 修复清空按钮功能
btnClear.addEventListener("click", () => {
  myForm.reset();
  // 清空薪资条显示
  nameSlip.innerText = "";
  grossSalary.innerText = "";
  sumOfAdditions.innerText = "";
  sumOfDeductions.innerText = "";
  netSalary.innerText = "";
});

• 将获取输入值的代码移至点击事件内部，确保每次计算都使用用户最新输入的内容
• 将genderDeduction和dependentDeduction的返回值从null改为0，避免计算时出现NaN错误
• 把totalAdditions、totalDeductions的计算逻辑移到点击事件中，保证基于最新值计算
• 修复清空按钮功能，直接调用form的reset方法，并清空薪资条的显示内容
• 优化finalSalary函数，直接接收计算好的additions和deductions参数，逻辑更清晰

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