0

HTML #1 を使用している場合は複数の ID が正常に機能しますが、HTML #2 を使用している場合は機能しません。Chrome Web コンソールの表示

>> "Uncaught TypeError: Cannot call method 'setAttribute' of null ".

html＃2で削除しました

<div id="0001"><a href="#"">LOGIN</a></div>、ブラウザが機能しなくなりました。

HTML #1

<html>
<head>
<title>Index</title>
</head>
<body>

<div id="0001"><a href="#"">LOGIN</a></div>
<div id="0002"><a href="#"">GO</a></div>
<div id="0003"><a href="#"">VISIT</a></div>
<div id="0004"><a href="#"">EXPLORE</a></div>
<div id="0005"><a href="#"">FUNNY PICS</a></div>
<script>
var element = document.getElementById("0001");
element.setAttribute('onclick', 'window.location.href=\'http://site.com/1.html\'');

var element = document.getElementById("0002");
element.setAttribute('onclick', 'window.location.href=\'http://site.com/2.html\'');

var element = document.getElementById("0003");
element.setAttribute('onclick', 'window.location.href=\'http://site.com/3.html\'');

var element = document.getElementById("0004");
element.setAttribute('onclick', 'window.location.href=\'http://site.com/4.html\'');

var element = document.getElementById("0005");
element.setAttribute('onclick', 'window.location.href=\'http://site.com/5.html\'');
</script>

</body>
</html>

HTML #2

<html>
<head>
<title>Index</title>
</head>
<body>

<div id="0002"><a href="#"">GO</a></div>
<div id="0003"><a href="#"">VISIT</a></div>
<div id="0004"><a href="#"">EXPLORE</a></div>
<div id="0005"><a href="#"">FUNNY PICS</a></div>
<script>
var element = document.getElementById("0001");
element.setAttribute('onclick', 'window.location.href=\'http://site.com/1.html\'');

var element = document.getElementById("0002");
element.setAttribute('onclick', 'window.location.href=\'http://site.com/2.html\'');

var element = document.getElementById("0003");
element.setAttribute('onclick', 'window.location.href=\'http://site.com/3.html\'');

var element = document.getElementById("0004");
element.setAttribute('onclick', 'window.location.href=\'http://site.com/4.html\'');

var element = document.getElementById("0005");
element.setAttribute('onclick', 'window.location.href=\'http://site.com/5.html\'');
</script>

</body>
</html>
4

2 に答える 2

3

全体のコンセプトが悪い。リンクがある場合は、そのリンクを使用してください。スクリプトなしで直接 (すべてのブラウザーと SEO に適しています)、または LINK の href または onclick を変更します。

数値 ID も使用しないでください

デモ

<html>
<head>
<title>Index</title>
<script type="test/javascript">
 var myLinks = [
'http://bing.com/search?q=go',
'http://bing.com/search?q=visit',
'http://bing.com/search?q=explore',
'http://bing.com/search?q=funny%20pics'
]; // note no comma on the last item
window.onload=function() {
  for (var i=0;i<myLinks.length;i++) {
// EITHER    document.getElementById("d"+i).getElementsByTagName("a")[0]).href=myLinks[i];
// OR   
      document.getElementById("d"+i).getElementsByTagName("a")[0].onclick=(function(idx) {
      var idx = i;
      return function() { // closure 
        location=myLinks[idx];
        return false; // cancel href
      }
    })(i);      
  }
}
</script>
</head>
<body>

<div id="d0"><a href="#"">GO</a></div>
<div id="d1"><a href="#"">VISIT</a></div>
<div id="d2"><a href="#"">EXPLORE</a></div>
<div id="d3"><a href="#"">FUNNY PICS</a></div>

</body>
</html>
于 2013-01-02T06:00:27.177 に答える
0

最初に要素が null かどうかを確認する必要があります。

HTML #2

<html>
<head>
<title>Index</title>
</head>
<body>

<div id="0002"><a href="#"">GO</a></div>
<div id="0003"><a href="#"">VISIT</a></div>
<div id="0004"><a href="#"">EXPLORE</a></div>
<div id="0005"><a href="#"">FUNNY PICS</a></div>
<script>
var element = document.getElementById("0001");
if(element!=null)
{
element.setAttribute('onclick', 'window.location.href=\'http://site.com/1.html\'');
}
var element = document.getElementById("0002");
if(element!=null)
{
element.setAttribute('onclick', 'window.location.href=\'http://site.com/2.html\'');
}
var element = document.getElementById("0003");
if(element!=null)
{
element.setAttribute('onclick', 'window.location.href=\'http://site.com/3.html\'');
}
var element = document.getElementById("0004");
if(element!=null)
{    
element.setAttribute('onclick', 'window.location.href=\'http://site.com/4.html\'');
}
var element = document.getElementById("0005");
if(element!=null)
{    
element.setAttribute('onclick', 'window.location.href=\'http://site.com/5.html\'');
}
</script>

</body>
</html>
于 2013-01-02T06:20:38.097 に答える