【问题标题】:InnerHTML does not update when used in function, but does outside of functionInnerHTML 在函数中使用时不会更新,但在函数之外会更新
【发布时间】: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,

标签: javascript html function innerhtml


【解决方案1】:

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

答案:

formSubmission(document);

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-03-06
    • 2014-10-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-10-25
    • 2013-01-20
    • 2021-04-08
    相关资源
    最近更新 更多