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

问题描述

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

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 函数返回 true，警报也不会在窗口中输出“测试”。我还在代码的第 25 行（第一个 addEventListener）的 Firefox 控制台中收到此错误：

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

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

解决方法

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

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

简单例子

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

event-handling html javascript