Question

Multiple IDs works fine when I'm using HTML #1 but doesn't work when I'm using HTML #2. Chrome web console shows

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

In html#2 I removed

<div id="0001"><a href="#"">LOGIN</a></div>, and the browsers do not work anymore.

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>
Was it helpful?

Solution

The whole concept is poor. If you have a link, USE the link. Either directly without script (good for all browsers and for SEO) or change the href or the onclick of the LINK

Also do NOT have numeric IDs

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>

OTHER TIPS

You need to check first that element is null or not.

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top