事件侦听器属性运行不正常

Question

我有几个链接是通过JavaScript链接的。第一个是有效的，我只是复制了代码并更改了名称，但第二个不起作用。我看过它，它和以前的完全一样，有效，所以我不知道发生了什么。

HTML:

    <a id="Home">Home</a> &nbsp&nbsp||&nbsp&nbsp
    <a href="account.php">Hamburger7</a> &nbsp&nbsp||&nbsp&nbsp
    <a id="Logout">Logout</a>
</div>

JavaScript:

<script>
    var Home_Link = document.getElementById("Home");
    Home_Link.addEventListener('click', Home, true);
    function Home() {
        window.location.href = "index.php";
    }
    var Login_Link = document.getElementById("Login");
    Login_Link.addEventListener('click', Login, true);
    function Login() {
    window.location.href = "-login.php";
    }
    var Logout_Link = document.getElementById("Logout");
    Logout_Link.addEventListener('click', Logout, true);
    function Logout() {
        window.location.href = "logout-redirect.php";
    }

</script>

我对它进行了编辑，包括了问题的原因（我不认为这是问题），我发现了问题。有人能告诉我为什么会有问题吗？

问题是把代码：

var Login_Link = document.getElementById("Login");
Login_Link.addEventListener('click', Login, true);
function Login() {
    window.location.href = "-login.php";
}

在最后一位代码之前，将阻止最后一位的代码运行。我想这是因为在这个版本的页面中没有名为"Login"的id。它为什么会这样做，有什么方法可以防止这种情况发生？

Answer 1

"事实证明，脚本挂在ID不存在的document.getElementById()上……如果有人能准确解释它挂在未找到的ID上的原因，那将是很有启发性的"

如果没有找到具有指定id的元素，getElementById()函数将返回null。这本身不是错误，也不会导致脚本崩溃。以下行：

var Login_Link = document.getElementById("Login");

"有效"是指它不会崩溃，但如果没有具有该id的元素，则Login_Link将设置为null，因此当您尝试这样做时：

Login_Link.addEventListener('click', Login, true);

这就像在说：

null.addEventListener('click', Login, true);

，会给你TypeError: Cannot call method 'addEventListener' of null。请注意，这个（或类似的）错误消息将显示在浏览器的控制台中，您可以通过在Chrome和IE中按F12或在FF中按ctrl-shift-k来查看。

如果你的页面是以这样一种方式设置的，即元素可能不在那里，那么你只需要测试null:

var Login_Link = document.getElementById("Login");
if (Login_Link != null) {
    Login_Link.addEventListener('click', Login, true);
}

请注意，对于您所展示的代码，应该根本不需要使用JavaScript——如果您的点击事件处理程序所做的唯一事情就是将window.location.href设置为某个地址，那么您还不如丢失JS并在锚点元素中设置href="index.php"（或任何地址）。

即使你打算在JavaScript点击处理程序中做一些更复杂的事情，我仍然建议至少设置href="#"（或者href="javascript:void(0)"，如果你觉得必须的话），因为具有href属性的锚元素可以从键盘上使用——也就是说，不会或不使用鼠标或其他指示设备的用户可以点击锚，然后按enter键"点击"它。

Answer 2

您的第二个链接没有id属性：

<a href="account.php">Hamburger7</a> &nbsp&nbsp||&nbsp&nbsp

并且您的脚本需要一个id属性：

var Login_Link = document.getElementById("Login");
Login_Link.addEventListener('click', Login, true);
function Login() {
    window.location.href = "-login.php";
}

因此，更改链接，并添加一个id属性：

<a href="account.php" id="login">Hamburger7</a> &nbsp&nbsp||&nbsp&nbsp