JavaScript中innerHTML在函数外可更新、函数内无法更新问题求助

问题原因 #

以下是你的代码存在的几处核心错误：

• 参数传递完全不匹配
  函数定义要求6个入参，你实际调用仅传了5个，且参数顺序、类型都不符合预期：
  函数定义入参顺序为 document、list、pilot、copilot、fuelLevel、cargoLevel，但实际调用时你传的是 document.form、pilot.value、copilot.value、fuel.value、cargo.value。并且你调用时直接传的是.value的字符串值，函数内部却还在用pilot.value的方式读取属性，字符串类型没有value属性，拿到的只会是undefined，自然没法更新内容。
• 内部变量引用错误
  函数内部用到的fuel、cargo、fuelLevelInput、cargoMassInput、form都没有明确来源，要么是未定义的全局变量，要么和你传入的参数名不匹配，逻辑执行时会直接报错阻断运行。
• 事件绑定逻辑冗余
  每次调用formSubmission函数都会给表单绑定一次submit事件，多次调用会导致同个事件触发多次逻辑，后续会出现重复执行的异常。

修复后的代码 #

// 提前获取所有需要用到的DOM元素，替换为你页面上对应元素的实际ID
const form = document.querySelector('#launchForm');
const pilotInput = document.querySelector('#pilotInput');
const copilotInput = document.querySelector('#copilotInput');
const fuelInput = document.querySelector('#fuelInput');
const cargoInput = document.querySelector('#cargoInput');

function formSubmission(event) {
  // 先阻止默认提交行为，避免逻辑异常时页面跳转
  event.preventDefault();

  // 统一读取并格式化输入值
  const pilotVal = pilotInput.value.trim();
  const copilotVal = copilotInput.value.trim();
  const fuelVal = Number(fuelInput.value.trim());
  const cargoVal = Number(cargoInput.value.trim());

  // 基础校验
  if (
    pilotVal === "" ||
    copilotVal === "" ||
    isNaN(fuelVal) ||
    isNaN(cargoVal)
  ) {
    alert("请填写所有字段，燃油量和货物重量必须为有效数字");
    return;
  }
  if (!isNaN(Number(pilotVal)) || !isNaN(Number(copilotVal))) {
    alert("飞行员、副飞行员姓名不能为纯数字，请输入有效名称");
    return;
  }

  // 更新人员状态
  document.getElementById("pilotStatus").innerHTML = `Pilot ${pilotVal} 准备就绪`;
  document.getElementById("copilotStatus").innerHTML = `Co-Pilot ${copilotVal} 准备就绪`;

  let launchReady = true;
  // 校验燃油状态
  if (fuelVal <= 10000) {
    document.getElementById("fuelStatus").innerHTML = "燃油量过低，不满足发射要求";
    launchReady = false;
  } else {
    document.getElementById("fuelStatus").innerHTML = "燃油量符合发射要求";
  }
  // 校验货物状态
  if (cargoVal >= 10000) {
    document.getElementById("cargoStatus").innerHTML = "货物重量过高，不满足发射要求";
    launchReady = false;
  } else {
    document.getElementById("cargoStatus").innerHTML = "货物重量符合发射要求";
  }

  // 更新最终发射状态
  const faultyItems = document.getElementById("faultyItems");
  const launchStatus = document.getElementById("launchStatus");
  if (launchReady) {
    launchStatus.innerHTML = "航天飞机已准备就绪，可以发射";
    launchStatus.style.color = "green";
    faultyItems.style.visibility = "hidden";
  } else {
    launchStatus.innerHTML = "航天飞机未达到发射条件";
    launchStatus.style.color = "red";
    faultyItems.style.visibility = "visible";
  }
}

// 仅绑定一次表单提交事件
form.addEventListener("submit", formSubmission);

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