Jump to content

passing parameters with this


tinfanide
 Share

Recommended Posts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS: setInterval & clearInterval within a function itself</title><script>function a(){	document.getElementById("menu1").onclick = function(){		if(h==22){timer1=setInterval("addHeight('"+this+"')",1);clearInterval(timer2);}		if(h==300){timer2=setInterval("cutHeight('"+this+"')",1);clearInterval(timer1);}		}	}h = 22;function addHeight(e){	if(h<300){h+=1;}	document.getElementById(e).style.height = h+"px";	}function cutHeight(e){	  if(h>22){h-=1;}	document.getElementById(e).style.height = h+"px";	}window.onload = function(){a();};</script></head><body><div id="menu1" style="width:200px; height:22px; background-color: #0FF; overflow: hidden;">Menu 1<div id="content1">Content of Menu 1Content of Menu 1Content of Menu 1Content of Menu 1Content of Menu 1Content of Menu 1Content of Menu 1</div></div></body></html>

Is the use of "this" to refer to the element id wrong?I can tell why but just don't know how to fix it.I have tried the one below which works but I just wonder if I have got wrong with the use of "this"Always puzzled by "this"

<script>function a(e){	document.getElementById(e).onclick = function(){		if(h==22){timer1=setInterval("addHeight('"+e+"')",1);clearInterval(timer2);}		if(h==300){timer2=setInterval("cutHeight('"+e+"')",1);clearInterval(timer1);}		}	}h = 22;function addHeight(e){	if(h<300){h+=1;}	document.getElementById(e).style.height = h+"px";	}function cutHeight(e){	  if(h>22){h-=1;}	document.getElementById(e).style.height = h+"px";	}</script>

Link to comment
Share on other sites

this is kind of tricky. It refers to the current object scope (or something like that...I can never get the explanation right :) ). If you don't know what scope is you may want to research that.In the case of event handlers, this will refer to the element on which the event happened. So if you wanted to get the id of the element that was clicked you would need to use this.id.

Edited by ShadowMage
Link to comment
Share on other sites

this is kind of tricky. It refers to the current object scope (or something like that...I can never get the explanation right :) ). If you don't know what scope is you may want to research that.In the case of event handlers, this will refer to the element on which the event happened. So if you wanted to get the id of the element that was clicked you would need to use this.id.
Yes, I forgot it was a place for the id. :) A bit of overlooking. Should be this.id.
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...