SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Loop issues - getElementById is not getting the right ID

    Hello all,

    I have script that is suppose to add an onClick event to an anchor tag based on the parent ID. That works fine when implemented by its self. My problems arise when I put it into a loop. When I click the links in side the divs the Background for that div is suppose to change color. What's happening instead is the background for the last div (the last element of the array) is getting it's background changed.

    I am sure this is a simple problem for someone out there.

    Thanks for any help!

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<title>Untitled Document</title>
    		<script type="text/javascript">
    			function start() {
    				var pageSections = new Array("horse", "cow", "squirl", "rhino");
    
    				for (var i=0; i < pageSections.length; i++) {
    					var elementLink = document.getElementById(pageSections[i]).getElementsByTagName('a');
    					var elementId = pageSections[i];
    					//alert(elementId)		
    	        for (var x=0; x < elementLink.length; x++) {
    								//alert(x + elementId)
    								elementLink[x].onclick = function() {
    								//alert(x + elementId)
    								document.getElementById(elementId).style.backgroundColor = "#F00";
    							}	 
    	         }
    			  }
    			}
        </script>
    	</head>
    	<body onload="start()">
    		<div id="horse" style="width:200px;height:300px;background: #EEE;">
    			<a href="#">This is a test</a><br />
    		</div>
    		<div id="squirl" style="width:200px;height:300px;background: #EEE;">
    			<a href="#">This is a test</a><br />
    		</div>
    		<div id="cow" style="width:200px;height:300px;background: #EEE;">
    			<a href="#">This is a test</a><br />
    		</div>
    		<div id="rhino" style="width:200px;height:300px;background: #EEE;">
    			<a href="#">This is a test</a><br />
    		</div>
    		
    	</body>
    </html>

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code Javascript:
    function start() {
      var pageSections = ["horse", "cow", "squirl", "rhino"];
      for (var i=0; i < pageSections.length; i++) {
        var elementLink = document.getElementById(pageSections[i]).getElementsByTagName('a');
        for (var x=0; x < elementLink.length; x++) {
          elementLink[x].onclick = function() {
        this.parentNode.style.backgroundColor = "#F00";
          }     
        }
    }
    if there is only going to be one link:
    Code Javascript:
    function start() {
      var pageSections = ["horse", "cow", "squirl", "rhino"];
      for (var i=0; i < pageSections.length; i++) {
     document.getElementById(pageSections[i]).getElementsByTagName('a')[0].onclick = function() {
        this.parentNode.style.backgroundColor = "#F00";
          }     
        }
    }

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by matches View Post
    Code:
    								elementLink[x].onclick = function() {
    								//alert(x + elementId)
    								document.getElementById(elementId).style.backgroundColor = "#F00";
    							}
    Use the Function() constructor:
    Code:
    elementLink[x].onclick = new Function("document.getElementById("+elementId+").style.backgroundColor = '#F00'");
    Tab-indentation is a crime against humanity.

  4. #4
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fantastic!

    Thanks a bunch! to both of you

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think it's neater to use this and walk the DOM.


Bookmarks

Posting Permissions

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