The presence of a prior JavaScript event handler nullifies the next event handler

I have a strange issue where I have two event handlers for two separate buttons on two webpages. I wouldn't think that the first one would affect the second one, but when the first one is present, the second one does not fire when the connected button is pressed. When I switch the order, the first one will always fire but the second will not. If I delete the first one, the second one fires. Here is my code:

function calculateBMI() {          var weight = parseInt(document.getElementById("Weight").value);          var height = parseInt(document.getElementById("Height").value);            //Invalid input check          if (weight < 0 || weight > 750) {              alert("Weight must be greater than 0 and less than or equal to 750");              return;          }          if (height < 0 || height > 100) {              alert("Height must be greater than 0 and less than or equal to 100");              return;          }            var resultArea = document.getElementById("Result");          resultArea.value = (weight * 703) / (height * 2);  }  document.getElementById("submit").addEventListener("click", calculateBMI);    function validateInput() {      var number1 = document.getElementById("Start").value;      var number2 = document.getElementById("End").value;      if (!isNaN(number1) || !isNaN(number2)) {          alert("Sorry, you must enter a valid number");          return false      }      else if (number1 < 0 || number2 < 0) {          alert("Sorry, you must enter a positive number");          return false;      }      else if (number2 < number1) {          alert("Sorry, the second number must be greater than the first number");          return false;      }      else {          return true;      }  }    function displayPrimeNumbers() {      if (validateInput()) {          alert("Test");      }  }  document.getElementById("getPrimed").addEventListener("click", displayPrimeNumbers);

<input id="submit" type="submit" name="submit">  <input id="getPrimed" type="button" value="Get Primes" name="getPrimed">

When I press the getPrimed button, 'Test' is not outputted in the window by alert even though the validateInput function returns true. I also get this error in the firefox console from line 25 of my code (The first addEventListener):

Uncaught TypeError: document.getElementById(...) is null

I hope this is enough information to help solve my problem!

https://stackoverflow.com/questions/66926757/the-presence-of-a-prior-javascript-event-handler-nullifies-the-next-event-handle April 03, 2021 at 08:42AM