先前的 JavaScript 事件处理程序的存在使下一个事件处理程序无效

Question

我有一个奇怪的问题，我有两个事件处理程序用于两个网页上的两个单独的按钮。我不认为第一个会影响第二个，但是当第一个存在时，按下连接的按钮时第二个不会触发。当我切换顺序时，第一个总是会开火，但第二个不会。如果我删除第一个，第二个就会触发。这是我的代码：

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">

当我按下 getPrimed 按钮时，即使 validateInput 函数 returns 为真，'Test' 也不会通过警报在 window 中输出。我还在代码的第 25 行（第一个 addEventListener）的 firefox 控制台中收到此错误：

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

我希望这些信息足以帮助解决我的问题！

Answer 1

在尝试使用之前检查各种按钮元素是否存在 .addEventListener()

发生的情况是，如果您的文件中的第一个不存在，该错误会阻止其余代码执行以进入下一个

简单示例

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

先前的 JavaScript 事件处理程序的存在使下一个事件处理程序无效

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

html

javascript

event-handling