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上，那将是有启发性的”< / em>的

如果找不到具有指定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

事件侦听器属性无法正常运行

2 个答案: