CODEWITHSUNDEEP
javascripthtmlevent-handling
Ethan Noble
Ethan Noble

Reputation: 49

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!

Upvotes: 0

Views: 28

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Check for the existence of the various button elements before trying to use .addEventListener()

What is happening is if the first one in your file doesn't exist, the error prevents the rest of the code executing in order to get to the next one

Simple example

var sub = document.getElementById("submit");
// null if doesn't exist, truthy element if it does
if (sub) { 
   sub.addEventListener("click", calculateBMI);
}

Upvotes: 2

Related Questions