Jump to content

Problem while using innerHTML


jaikiran
 Share

Recommended Posts

Hi, I am new to javascript and just tried out a few examples provided on w3 schools javascript section. One of them was the Button Animationexample. I did a slight modification to this example. Here's what i am trying to achieve:- onMouseOver of the anchor tag, i am replacing the image with a string(using innerHTML of the anchor tag). While doing this, i maintain the image object in a global variable - onMouseOut of the anchor tag, i am trying to restore back the image by using the contents of the global variable.I am able to do the replace the image with the string in onMouseOver, however onMouseOut, i am not able to restore it back.Here's the code:

<html><head><script type="text/javascript">var myvfunction mouseOver(){myv=document.getElementById("mya").innerHTML//alert("Before replacing innerHTML is: " + myv)document.getElementById("mya").innerHTML="Hi"//alert("After replacing, obj is: " + myv)}function mouseOut(){//alert("Before assigning in moveout, obj is: " + myv)document.getElementById("mya").innerHTML=myv}</script></head><body><a id="mya" href="http://www.w3schools.com" target="_blank"onmouseover="mouseOver()"onmouseout="mouseOut()"><img border="0" alt="Visit W3Schools!" src="b_pink.gif" name="b1" width="26" height="26" /></a></body></html>

I have commented out the alerts. Please uncomment them if required. Whats baffling me is that at the end of the mouseOver() method, i print the contents of the global variabl 'myv' which correctly points to the image object. But, on entering the mouseOut() method, when i print the contents of the same, the contents have surprising changed to the string 'hi'.Any idea, whats wrong here?

Link to comment
Share on other sites

By writing an innerHTML on the anchor tag you destroy the rest of it's contents - the image - so it no longer exists. To make it appear again you would have to put it back using innerHTML on the mouseout

function mouseOut(){  document.getElementById("mya").innerHTML="<img src=\"b_pink.gif\" />";}

Link to comment
Share on other sites

Thank you, scott100. Got your point. I have few question though:1) In the mouseOut() function, the implement that you suggest, would require the mouseOut() method to have a knowledge about which object is enclosed in the anchor tag(in this case the img object). What if i want to make the mouseOut() method generic i.e. irrespective of which object is enclosed in the anchor tag, i would like to swap it will the string 'hi' and the originally enclosed object, on every mouseout and mouseover event. Is this possible? The reason for maintaining the global variable 'myv' was to achieve this purpose.2) For a moment, lets forget about my question#1 above. One more thing that surprised me in the javascript code that i posted as part of my first post in this topic, is that if you uncomment the alert and watch the value of 'myv' variable, it is pointing to the img object just before *leaving* the mouseover() method. But, when *entering* the mouseout() method, the value of the same variable changes to 'hi'. How does this value get changed between these calls?

Link to comment
Share on other sites

1)The reason for maintaining the global variable 'myv' was to achieve this purpose.
Your global variable wasn't being recognised, i tend to use a function onload to set globals (minus the var).
<html><head><script type="text/javascript">function go(){myv=document.getElementById("mya").innerHTML;}function mouseOver(){document.getElementById("mya").innerHTML="Hi";}function mouseOut(){document.getElementById("mya").innerHTML=myv;}</script></head><body onload="go()"><a id="mya" href="http://www.w3schools.com" target="_blank" onmouseover="mouseOver()" onmouseout="mouseOut()"><img border="0" alt="Visit W3Schools!" src="b_pink.gif" width="26" height="26" /></a></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...