0

我有几个链接是通过 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";
}

在最后一位代码之前阻止最后一位代码运行。我假设这是因为在此版本的页面中没有名为“登录”的 ID。为什么它会这样做，有什么方法可以防止这种情况发生？

4

2 回答 2

1

“事实证明，脚本挂在document.getElementById()ID 不存在的地方……如果有人能准确解释为什么它挂在未找到的 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 键“单击”它。

于 2013-07-16T12:26:06.983 回答
0

您的第二个链接没有 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
于 2013-07-15T23:20:32.760 回答