alzami Posted December 8, 2013 Share Posted December 8, 2013 i want to show a div onClick over a button.and stay there a for a little moment then disappear again.codes seems fine but not working... <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>#it{ width:250px; height:100px; background-color:green; border-radius:5px; display:none;}</style></head><body><input type="button" value=" click to view " onClick="show('it');"><div id="it"></div><script>var i=0;function show(el){ var m=document.getElementById(el); m.style.display="block"; var s=its_prop(); if(s){ m.style.display="none";}}function its_prop(){ var d=document.getElementById("it"); d.style.display="block"; i++; if(i==10){ clearTimeout(p); i=0; return true; } else{ var p=setTimeout(its_prop,100); } } </script></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted December 8, 2013 Share Posted December 8, 2013 The first function only test for true/false once, so checking if it is true or false on first loop will always return false, it would only disappear if you click the button a second time, when the count reached exactly 10. Link to comment Share on other sites More sharing options...
alzami Posted December 8, 2013 Author Share Posted December 8, 2013 will you please explain it again?? it is not perfectly clear to me.i don't see any wrong in my code.but can't catch the problem Link to comment Share on other sites More sharing options...
dsonesuk Posted December 8, 2013 Share Posted December 8, 2013 (edited) 1) you click button 2) function show(el) is called and run (still first click) 3) s=its_prop(); check if true returned (still first click) 4) in second function its_prop() the loop is started count 1, this it not == to 10 so nothing/false returned (still first click) 5) if condition receives return false so it is still display block (still first click) 6) THE END function show(el) is done.(still first click) IT IS NOT waiting OR looping for remaining returns. 7) mean while function its_prop() continues to loop until 10, returns true/false but function show(el) is (see 6) Edited December 8, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
alzami Posted December 8, 2013 Author Share Posted December 8, 2013 (edited) actually how i see the function is 1)onCLick show will start 2)s=its_prop() will be called; 3)as i set setTimeout() in a way that it will re-execute its_prop() until 1==10 ; 4)it will then return true after its_prop() executed 10 times. Â it should be like that,isn't it?still confused Edited December 8, 2013 by alzami Link to comment Share on other sites More sharing options...
Hadien Posted December 8, 2013 Share Posted December 8, 2013 setTimeout doesn't stop the flow of the code. the code still runs on even after you call setTimeout. its a "do this at a later time" method, not a "hold off everything until after this function is called" method. if it did... then there'd be no point of functions like clearTimeout or clearInterval as the code could never reach it.use this show function function show(el){ var m=document.getElementById(el).style; var delayHide = funtion delayHide (){ m.display = "none"; } m.display="block"; return setTimeout(delayHide,1000);} Link to comment Share on other sites More sharing options...
alzami Posted December 8, 2013 Author Share Posted December 8, 2013 (edited) its clear to me now .thanks a lot!!! Edited December 8, 2013 by alzami Link to comment Share on other sites More sharing options...
alzami Posted December 8, 2013 Author Share Posted December 8, 2013 can a setTimeout function be looped??? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 8, 2013 Share Posted December 8, 2013 visual representation on what happening <!doctype html><html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> #it{ width:250px; height:100px; background-color:green; border-radius:5px; display:none; } </style> </head> <body> <input type="button" value=" click to view " onClick="show('it');"> <div id="it"></div> <script> var i = 0, s, valid; function show(el) { var m = document.getElementById(el); m.style.display = "block"; s = its_prop(); document.getElementById("count1").innerHTML = i + " : " + s; if (s) { m.style.display = "none"; } } function its_prop() { var d = document.getElementById("it"); d.style.display = "block"; i++; if (i == 10) { clearTimeout(p); i = 0; valid = true; } else { var p = setTimeout(its_prop, 100); } document.getElementById("count2").innerHTML = i + " : " + valid; return valid; } </script> <div id="count1"></div> <div id="count2"></div> </body></html> Link to comment Share on other sites More sharing options...
alzami Posted December 8, 2013 Author Share Posted December 8, 2013 thanks Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now