dynamic onMouseover ? ...

[DrEvil]

Ok so I didn't really know what to call the thread, but more to the point!

I have a load function that sets the default values on 5 fields, and adds an onmouseover event but the event everytime has the same parameter...

while(i<=5){
		id='P'+i.toString();
		d=document.getElementById('c'+id);//.innerHTML="Not Started";
        // The 'status' box
		d.innerHTML="Not Started";
		d.style.backgroundColor="#FFFF00";

		d=document.getElementById(id);
        // The actual 'name' of the box
		d.onmouseover=function(){hoverA(id);};
		//alert(id);
		i++;
	}

hoverA(id) just shows the id (which I will change later...)
but it always shows the last value 'P5'
I'm sure I'm doing something really stupid wrong... but I can't figure it out...

thanks for helping

 

[UndeadDragon]

Can I see the little bit of the HTML too? I'm guessing that there is just 2 divs, one called "cPX" and one that is just "PX"?

Plus, I don't know if it would help to null d each time. It may be retaining a value.

Another thing to try would be to alert() each value on each loop to see where the error may be.

 

[GetTriggerUnit-]

nvm

id='P'+i.toString();
id is defined before or you forgot "var"?

samething with "i" and why aren't you using a for-loop?

 

[DrEvil]

//

	var i=1;
	var d;
	var id;//='P'+i.toString();
//...

  <div class="cell" id="P1">Physics 1</div>
  <div class="completed" id="cP1">&nbsp;</div>
  
  <div class="cell" id="P2">Physics 2</div>
  <div class="completed" id="cP2">&nbsp;</div>

I wanted to have it so when the user hovers over any of the 'cell' classes it sends that specific id to the function to show more information
While 'completed' class is to show 'not started' 'in progress' 'finished'

Using alert(id) shows it right 'P1','P2'... 'P5'
If I null both of them at the end it always shows 'null' once hovered over
It seems as if the function retains the last value of id...

 

[phyrex1an]

That's because the context created by function(){hoverA(id);}; refers to the variable id and not the value of the variable id at time of creation. You have to create a distinct variable for each onmouseover. I'm not entirely sure of javascripts scoping rules but either of these two solutions should work:

while(i<=5){
       [B]var[/B] id='P'+i.toString();
        d=document.getElementById('c'+id);//.innerHTML="Not Started";
        // The 'status' box
        d.innerHTML="Not Started";
        d.style.backgroundColor="#FFFF00";

        d=document.getElementById(id);
        // The actual 'name' of the box
        d.onmouseover=function(){hoverA(id);};
        //alert(id);
        i++;
    }

while(i<=5){
        id='P'+i.toString();
        d=document.getElementById('c'+id);//.innerHTML="Not Started";
        // The 'status' box
        d.innerHTML="Not Started";
        d.style.backgroundColor="#FFFF00";

        d=document.getElementById(id);
        // The actual 'name' of the box
        (function(id) {
              d.onmouseover=function(){hoverA(id);};
        })(id);
        //alert(id);
        i++;
    }

A nicer solution is to extract the content of the while loop to its own function.

 

[DrEvil]

Ok thanks phyrex1an, tbh all I really needed to know if it was a reference or value and I guess now I know it stores a reference ( which a bit of trial and error could've shown me... but I was lazy... )

I guess I will clean it up to a function for registering blah... blah...

//
while(..){
registerHover(id);
}

functions inside functions.. kindof confusing but should be learn'able

Thanks for all the help guys

 

[Magentix]

It always shows the last value because your anonymous function only gets called on mouseover.
Then it will look up the variable id in its scope chain, ending up in your main function's scope.

id will then be 5, because the anonymous function only fires after setup function has already run.

Phyrexian's solution is correct, as by using an IIFE,
you pass the current value of id as a parameter to set the onmouseover event with

Ok thanks phyrex1an, tbh all I really needed to know if it was a reference or value and I guess now I know it stores a reference

JavaScript never passes references, always values.
With Object it seems to pass a reference, but it actually passes the value of the stack item that behaves as a reference to the actual object on the heap.

You didn't get this problem because you passed by reference, you got the problem because JS will only look up the value of id when the mouseover fires.
That will always be 5, since the variable 'id' in the setup function's scope chain ended at 5.

EDIT
------

Alternatively, have you tried this:

while(i<=5){
        var id='P'+i,
        doc=document,
        d=doc.getElementById('c'+id);

        d.innerHTML="Not Started";
        d.style.backgroundColor="#FFFF00";

        d=doc.getElementById(id);
        d.onmouseover=function(){hoverA(this.id);};

        i++;
    }

• prevents vars from being global
• caches document for performance
• doesn't use an IIFE