...

View Full Version : getElementsByTagName returning an array of undefined elements



tim@toky
07-17-2007, 07:18 PM
I'm stumped as to why this is happening. I'm just trying to do a simple rollover and adjust the position of the background image on each anchor tag. I am getting an error on each mouseover that the element has no properties. Any help would be greatly appreciated. Thanks in advance.

The markup:

<div id="header-wrapper">
<ul id="main-nav">
<li id="our-mission">
<a href="#">Our Mission</a>
</li>
<li id="insight-reviews">
<a href="#">Insight &amp; Reviews</a>
</li>
<li id="how-we-can-help">
<a href="#">How We Can Help</a>
</li>
<li id="who-we-are">
<a href="#">Who We Are</a>
</li>
<li id="tools-techniques">
<a href="#">Tools &amp; Techniques</a>
</li>
</ul>
<div style="clear:both;"></div>
</div>

The script:


function init(){
var els = document.getElementById("main-nav");
var links = els.getElementsByTagName("a");
var index = 0;

for(index; index < links.length; index++){
links[index].onmouseover = function(){
links[index].style.backgroundPosition = "bottom";
}
}
}

window.onload = init;

vwphillips
07-17-2007, 07:56 PM
function init(){
var els = document.getElementById("main-nav");
var links = els.getElementsByTagName("a");
var index = 0;
for(index; index < links.length; index++){
links[index].onmouseover = function(){
this.style.backgroundPosition = "bottom";
}
}
}

Bill Posters
07-17-2007, 08:24 PM
...css?

ccemmett
07-21-2007, 06:36 PM
Try this -CC

<ul id="main-nav">
<li id="our-mission">
<a href="#" onmouseover="alignIt(0)">Our Mission</a>
</li>
<li id="insight-reviews">
<a href="#" onmouseover="alignIt(1)">Insight &amp; Reviews</a>
</li> (etc...)

function alignIt(target){
var navs = document.getElementById("main-nav")
var links = navs.getElementsByTagName("a")
for(var i = 0; i < links.length; i++){
if(i == target){
links[i].style.backgroundPosition = "bottom"
}else{
links[i].style.backgroundPosition = "top"
}
}
}

ccemmett
07-22-2007, 07:13 PM
stupid me, Bill is correct- css indeed:

a:hover { background-position: bottom; }

and that's all you need.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum