矢印を使用してブログ投稿を前後に移動できるようにする JavaScript コードを作成しようとしています。
これを行う最も簡単で簡単な方法はid
、前後の投稿に移動するタグをアンカーに追加し、JavaScripthref
にアンカーから読み取らせることだと考えました。
私はグーグルでそれを機能させました-私はここで答えを見つけたと思います-しかし、私にはこの問題があります-コードは最初の投稿で機能しません。prev
これはidがないためだと思いますTypeError: document.getElementById(...) is null
。これは、どういうわけか、コードの実行を停止しhref
、prev
ID の も取得できません。
これを修正するにはどうすればよいですか?
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">« <span>Previous Post</span></a></li>
<li class="next"><a id="next" href="http://www.google.com"><span>Next Post</span> »</a></li>
</ul>
</body>
</html>