Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getElementsByTagName returning an array of undefined elements

    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:
    Code:
    <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:
    Code:
    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;

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    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";
    		}
    	}
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    ...css?

  • #4
    New Coder
    Join Date
    Nov 2003
    Location
    San Francisco
    Posts
    45
    Thanks
    2
    Thanked 2 Times in 2 Posts
    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"
    }
    }
    }

  • #5
    New Coder
    Join Date
    Nov 2003
    Location
    San Francisco
    Posts
    45
    Thanks
    2
    Thanked 2 Times in 2 Posts
    stupid me, Bill is correct- css indeed:

    a:hover { background-position: bottom; }

    and that's all you need.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •