tinfanide Posted August 17, 2011 Share Posted August 17, 2011 <!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 More sharing options...
ShadowMage Posted August 17, 2011 Share Posted August 17, 2011 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. Link to comment Share on other sites More sharing options...
tinfanide Posted August 18, 2011 Author Share Posted August 18, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.