InnerHTML does not update when used in function, but does outside of function

Question

I'm trying to figure out why the following if else statement updates the innerHTML when it's used outside of a function, but when it's inside the function the innerHTML does not update. I'm sure it's a an issue with my parameters, but I'm just not sure what I'm missing with the parameters. I'm new to coding so I'm sure it's something basic, but i've racked my brain trying to figure it out but nothing appears to work. Early in my file I declared pilot, copilot, fuel, and cargo; I didn't include them in this snippet.

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
);

Any assistance is much appreciated.

Answer 1

I figured it out, after several hours. I finally realized that I was passing too many parameters when attempting to call the function. I was thinking that I had to individually push the document, pilot, etc. parameters, but all I had to really use was document.

Answer:

formSubmission(document);

Thanks deckpk and epascarello for the help. What I figured out is probably what you were saying epascarello, but I was too much of a newbie too figure it out.