airesofwar Posted December 3, 2010 Share Posted December 3, 2010 I wanted to make a script to hide a element on the page when click. I know how to add your basic button to the content its self to hide it but could I add the script to the element then call for the function outside of the element.Could you give me the script to do this with. Link to comment Share on other sites More sharing options...
Scyha Posted December 3, 2010 Share Posted December 3, 2010 hi, i dunno if this is what you need..<html><head><script type = "text/javascript">function showhide(){var sh = document.all.test.style;if (sh.display=="none") { sh.display = ""; }else { sh.display = "none"; }}</script></head><body><button onclick = "showhide();">click me</button><p id = "test" style = "display:none">show or hide </p></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted December 3, 2010 Share Posted December 3, 2010 hi, i dunno if this is what you need..<html><head><script type = "text/javascript">function showhide(){var sh = document.all.test.style;if (sh.display=="none") { sh.display = ""; }else { sh.display = "none"; }}</script></head><body><button onclick = "showhide();">click me</button><p id = "test" style = "display:none">show or hide </p></body></html>hmm, dot notation is a little old fashioned. To the OP do you want to be able to show the element again onClick? Or just hide it forever on one onClick? This post has the right idea, just a little out of date. This would be considered the "modern" way of doing the same thing. (assumes you only want to hide it).<html><head><script type = "text/javascript">function hide(){ var element = document.getElementById("test"); element.style.display = "none";};</script></head><body><button onclick="hide()">click me</button><p id="test">I'm a paragraph</p></body></html> notice the use of document.getElementById(). This would be modern way of referencing unique elements on a page. Now if you wanted to toggle the display, this is how you might want the function to look: function showhide(){ var element = document.getElementById("test"); if(element.style.display == "none"){ element.style.display = "block"; }else{ element.style.display = "none"; }; //or, a fancy way to write the if/else //element.style.display = ((element.style.display == "none") ? "block" : "none");};</script> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.