SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why doesn't this work (getElementById)

    In my style sheet box is set to display: none, when the page loads nothing happens and I get no errors, if I don't put the mouseout line in, it displays all as if the page loading was one giant mouseover, please help I've been trying to accomplish this for about 5 hours. /sigh


    Code:
    function prepTooltip() {
    
    for (var i=1; i<=5; i++) {
      entry = document.getElementById("entry_" + i);
      entry.onmouseover = document.getElementById("box_" + i).style.display = "block";
      entry.onmouseout = document.getElementById("box_" + i).style.display = "none";
    }	
    }

  2. #2
    SitePoint Member
    Join Date
    May 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If anyone was interested, I figured it out, I tried it tons of different ways and the underlying problem is when you use a function inside an event handler you lose access to your variables, so you need to use a property of the element to pass the data. Here is the working function.
    Code:
    window.onload = prepTooltip;
    
    
    
    function prepTooltip() {
    	
    	var results = document.getElementById('results');
    	var divs = document.getElementsByTagName('div');
    	var entry = Array();
    	var id = 1;
    	
    	for (var i=0; i<divs.length; i++) {
    		if (divs[i].className == 'entry') {
    			
    			if (document.getElementById(divs[i].id)) {
    				entry[id] = divs[i];
    				entry[id].destination = 'box_' + divs[i].id.split("_")[1];
    				
    				entry[id].onmouseover = function() {
    					document.getElementById(this.destination).style.display = 'block';
    				}
    			
    				entry[id].onmouseout = function() {
    					document.getElementById(this.destination).style.display = 'none';
    				}
    				id++;
    			}
    		}
    	}	
    }


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
  •