InnerHTML 在函数中使用时不会更新，但在函数之外会更新

Posted 2023-05-07

【中文标题】InnerHTML 在函数中使用时不会更新，但在函数之外会更新

【英文标题】：InnerHTML does not update when used in function, but does outside of function

【发布时间】：2022-01-01 14:36:10

【问题描述】：

我试图弄清楚为什么下面的 if else 语句在函数外部使用时会更新 innerhtml，但是当它在函数内部时，innerHTML 不会更新。我确定这是我的参数的问题，但我只是不确定参数缺少什么。我是编码新手，所以我确信这是一些基本的东西，但我绞尽脑汁想弄清楚但似乎没有任何效果。在我档案的开头，我宣布了飞行员、副驾驶、燃料和货物；我没有将它们包含在这个 sn-p 中。

function formSubmission(document, list, pilot, copilot, fuelLevel, cargoLevel) 
  form.addEventListener("submit", function(event) 
    if (
      pilot.value === "" ||
      copilot.value === "" ||
      fuel.value === "" ||
      cargo.value === ""
    ) 
      alert("Please enter all information");
      event.preventDefault();
     else if (isNaN(pilot.value) === false || isNaN(copilot.value) === false) 
      alert(
        "Please enter valid name for Pilot Name or Co-pilot Name (or both)"
      );
      event.preventDefault();
     else if (isNaN(fuel.value) === true || isNaN(cargo.value) === true) 
      alert("Please enter valid number for Fuel Level or Cargo Mass (or both)");
      event.preventDefault();
     else 
      document.getElementById(
        "pilotStatus"
      ).innerHTML = `Pilot $pilot.value is ready for launch`;
      document.getElementById(
        "copilotStatus"
      ).innerHTML = `Co-Pilot $copilot.value is ready for launch`;
      if (fuelLevelInput.value <= 10000) 
        document.getElementById("faultyItems").style.visibility = "visible";
        document.getElementById("launchStatus").innerHTML =
          "Shuttle Not Ready for Launch";
        document.getElementById("launchStatus").style.color = "red";
        document.getElementById("fuelStatus").innerHTML =
          "Fuel level too low for launch";
       else 
        document.getElementById("fuelStatus").innerHTML =
          "Fuel level high enough for launch";
      
      if (cargoMassInput.value >= 10000) 
        document.getElementById("faultyItems").style.visibility = "visible";
        document.getElementById("launchStatus").innerHTML =
          "Shuttle Not Ready for Launch";
        document.getElementById("launchStatus").style.color = "red";
        document.getElementById("cargoStatus").innerHTML =
          "Cargo mass too high for launch";
       else 
        document.getElementById("cargoStatus").innerHTML =
          "Cargo mass low enough for launch";
      
      if (cargoMassInput.value <= 10000 && fuelLevelInput.value >= 10000) 
        document.getElementById("launchStatus").innerHTML =
          "Shuttle Ready for Launch";
        document.getElementById("launchStatus").style.color = "green";
        document.getElementById("cargoStatus").innerHTML =
          "Cargo mass low enough for launch";
        document.getElementById("faultyItems").style.visibility = "hidden";
      
      event.preventDefault();
    
  );


formSubmission(
  document.form,
  pilot.value,
  copilot.value,
  fuel.value,
  cargo.value
);

非常感谢任何帮助。

【问题讨论】：

您将字符串视为 DOM 元素。 formSubmission(document.form, pilot.value,

【参考方案1】：

几个小时后，我想通了。我终于意识到我在尝试调用该函数时传递了太多参数。我在想我必须单独推送文档、飞行员等参数，但我真正要使用的只是文档。

答案：

formSubmission(document);

感谢 deckpk 和 epascarello 的帮助。我想出来的可能就是你说的 epascarello，但我太菜鸟了。