onclick help!

[genzedu777]

I have seen this code some where, could someone please explain to me the logic behind it?

 

I don’t really get this point…

 

if (e.style.display == "none") {

e.style.display = "block";

}

else {

e.style.display = "none";

}

return false;

}

 

<a onclick="return showContents('profile_54',this)" href="">View more info</a>

 

<div id="profile_54" style="display:none;margin: 0;padding:0; ">

</div>

 

1) Where does the ‘style.display’ comes from? Can I just code it as ‘if (e ==”none”),  without the style.display?

 

2) e.style.display = “block", just to reconfirm my understanding. The meaning for this is that if e.style.display == none, it will be “block”, no contents will be shown, unless user clicks on it (view more info)?

 

3) else { e.style.display = “none”; }, how does this code works?, why did it go back to “none” again?

 

4) return false;, what is this for?

 

5) "return showContents('profile_54',this)" , my understanding is that once there is an ‘onclick’, it will show the contents in ‘profile_54’, however what is the ‘this’ for?

 

 

Very much appreciated if anyone could provide me with more information. Thank you.

 

Regards,

Wilson 

 

 

[KevinM1]

It's JavaScript code to toggle the visibility of an element.  The .style.display portion of the code refers to that element's CSS display attribute.  The code literally says

 

On a click of that particular hyperlink

  If the target element's display attribute value is set to 'none'

      Set it to 'block' to make it visible

  Else, it's already visible

      So set the target element's display attribute value to 'none' to hide it again

 

For the rest, let's see...

 

Return false is there to stop the hyperlink from attempting to bring the user to another page.  The coder simply wants the link to act like a toggle button rather than a real hyperlink.  Returning false stops the link's default behavior.

 

The 'this' represents that particular element, in this case, that hyperlink.  The toggle function apparently requires a reference to the actual link that invoked it, most likely because the page has several such links that toggle the visibility of elements, and it's necessary for the page to keep track of them.

 

Hope this helps.