-3

矢印を使用してブログ投稿を前後に移動できるようにする JavaScript コードを作成しようとしています。

これを行う最も簡単で簡単な方法はid、前後の投稿に移動するタグをアンカーに追加し、JavaScripthrefにアンカーから読み取らせることだと考えました。

私はグーグルでそれを機能させました-私はここで答えを見つけたと思います-しかし、私にはこの問題があります-コードは最初の投稿で機能しません。prevこれはidがないためだと思いますTypeError: document.getElementById(...) is null。これは、どういうわけか、コードの実行を停止しhref、prevID の も取得できません。

これを修正するにはどうすればよいですか?

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>
4

3 に答える 3

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;
        }
    };
于 2013-03-21T12:52:00.310 に答える
0

その場合、 のプロパティにアクセスしようとするとエラーになるため、document.getElementById()が DOM 要素参照または を返すかどうかをテストする必要があります。nullnull

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>アクセスできます。hrefgetAttribute

于 2013-03-21T12:51:36.517 に答える