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

Multiple "document.getElementById" scripts doesn't work

本文关键字：脚本 不起作用 quot document getElementById 多个      更新时间：2023-09-26

当我使用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>

整个概念很差。如果你有链接，使用链接。直接没有脚本(适用于所有浏览器和SEO)或更改链接

的onclick的href。

也不要有数字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>

您需要首先检查该元素是否为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>
相关文章：