Question

我正在尝试编写一段JavaScript代码，允许我使用箭头在博客文章中来回传播。

我认为最简单，最简单的方法是在锚点中添加id标签，然后让JavaScript从锚点读取href。 / p>

我用Google搜索并使其工作 - 我相信我在这里找到了答案 - 但我有这个问题 - 代码在第一篇文章中不起作用。我认为这是因为没有prev个ID，我得到TypeError: document.getElementById(...) is null。不知何故，这会停止代码的执行，而我也无法获得href id的prev。

我该如何解决这个问题？

这是一个HTML演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <script type="text/javascript">
        var nextpage;
        var prevpage;

        window.onload=function()
        {
            prevpage = document.getElementById("prev").getAttribute("href");
            nextpage = document.getElementById("next").getAttribute("href");
        }

        document.onkeydown = function(evt)
        {
            evt = evt || window.event;
            switch (evt.keyCode)
            {
                case 37:
                    if (typeof prevpage !== 'undefined') window.location = prevpage;
                    break;
                case 39:
                    if (typeof nextpage !== 'undefined') window.location = nextpage;
                    break;
            }
        };
    </script>
</head>

<body>

<ul>
    <li class="previous"><a id="prev" href="http://www.yahoo.com">&laquo; <span>Previous Post</span></a></li>
    <li class="next"><a id="next" href="http://www.google.com"><span>Next Post</span> &raquo;</a></li>
</ul>

</body>

</html>

Answer 1

如果您尝试读取null的属性，则会抛出错误。因此，您需要在阅读之前测试它是否存在。

    window.onload=function()
    {

        var prevElem = document.getElementById("prev");
        var nextElem = document.getElementById("next");

        prevpage = prevElem ? prevElem.href || null;
        nextpage = nextElem ? nextElem.href || null;
    }

    document.onkeydown = function(evt)
    {
        evt = evt || window.event;
        switch (evt.keyCode)
        {
            case 37:
                if (prevpage) window.location = prevpage;
                break;
            case 39:
                if (nextpage) window.location = nextpage;
                break;
        }
    };

Answer 2

在这种情况下，您必须测试document.getElementById()是否返回DOM元素引用或null，因为尝试访问null属性会导致错误。

window.onload=function()
{
    var prevpage = document.getElementById("prev"),
        nextpage = document.getElementById("next");
    document.onkeydown = function(evt)
    {
        evt = evt || window.event;
        switch (evt.keyCode)
        {
            case 37:
                if (prevpage) window.location = prevpage.href;
                break;
            case 39:
                if (nextpage) window.location = nextpage.href;
                break;
        }
    };
};

null被视为虚假值，因此它不会进入您的交换机内的if块。

假设next / prev是主播<a>，您可以直接访问他们的href媒体资源，而无需使用getAttribute。

Answer 3

我发现了问题。

prevpage = document.getElementById("prev").getAttribute("href");给出一个TypeError，它会停止执行。我需要做的是首先检查document.getElementById("prev")是否为空。如果不是，那么我可以getAttribute("href")

我需要getAttribute("href")，因为我想抓取本地文件--ie post30.html，而不是http://www.example.com/post30.html。我忘记提及了。

这就是代码的样子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <script type="text/javascript">
        var nextpage;
       var prevpage;

       window.onload=function()
        {   
           var temp;

           temp = document.getElementById("prev");  
            if (temp) prevpage = temp.getAttribute("href")

           temp = document.getElementById("next");
            if (temp) nextpage = temp.getAttribute("href")

        }

       document.onkeydown = function(evt)
        {
           evt = evt || window.event;
            switch (evt.keyCode)
            {
                case 37:
                    if (prevpage) window.location = prevpage;
                    break;
                case 39:
                    if (nextpage) window.location = nextpage;
                    break;
            }
        };
    </script>
</head>

<body>

<ul>
    <li class="previous"><a id="prev" href="next.html">&laquo; <span>Previous Post</span></a></li>
    <li class="next"><a id="next" href="prev.html"><span>Next Post</span> &raquo;</a></li>
</ul>

</body>

</html>

TypeError之后执行停止：document.getElementById（...）为null

3 个答案: