Question

当我使用HTML＃1时，多个ID工作正常但在我使用HTML＃2时不起作用。 Chrome网络控制台显示

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

Answer 1

整个概念很差。如果您有链接，请使用该链接。直接没有脚本（适用于所有浏览器和SEO）或更改链接的href或onclick

也没有数字ID

DEMO

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

Answer 2

您需要首先检查该元素是否为空。

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>

多个“document.getElementById”脚本不起作用

2 个答案: