Bojak Posted September 21, 2013 Share Posted September 21, 2013 <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="" /> <script> ShowCommet{ document.getElementById("button").style.display = ""; } HideComment { document.getElementById("hidebutton").style.display = "none"; } </script> <title>Untitled 1</title> </head> <body> <div id="box1" style="background-color: silver" style="opacity: 50px";"> <button name="comment" id="button" onClick="ShowComment()"> <STRONG>Comment</STRONG> </button> <!--this adds the button--> <button name="hide" id="hidebutton" onClick="HideComment()" style="display:none"> <STRONG>Hide</STRONG> </button> </div> <br /> <textarea width="100" height="10" id="hidebox" onclick="HideComment()"></textarea> </body> </html> this text area wont hide. i dont know what i am doing wrong? Quote Link to comment Share on other sites More sharing options...
jazzman1 Posted September 21, 2013 Share Posted September 21, 2013 Don't duplicate posts and waste our time, please! Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 21, 2013 Share Posted September 21, 2013 My guess would be that you don't have any functions to hide the textarea. Quote Link to comment Share on other sites More sharing options...
KubeR Posted September 23, 2013 Share Posted September 23, 2013 (edited) First of all: ShowCommetYour function name is missing an "n" in the word "comment" while in the HTML you typed it with N' letter. it's missing a "representation" of the function,means JS can not and won't recognize them as functions unless you claim them as one and should follow two barackets function ShowComment() { } the textarea should not have the attribute "onclick" if you don't want to hide it .style.display = ""; this won't do anything,but on the other hand .style.display = "block"; this will display the element style="opacity: 50px";"the end of the property( should be before the quotation marks and it should end with one quotationmark,and not two.But also is needless if it's the end of the attribute,this is only used to seperate and indicate the end of the property. Also the ratio of the opacity is from 0 to 1,for example : opacity: 0.5; = the element will be shown in 50% opacity and 50% transparency. opacity: 0.75; = the element will be shown in 75% opacity and 15% transparency. But be aware that the opacity will set the opacity of all of it's childs and if it was set before and you set one of it's childs opacity again,it's opacity will be measured by the opacity of it's father and of the opacity you set for it. background-color works the same as background . there should not be two attributes of the same type,means if you will put "style" attribute twice,the attribute simply won't effect/work.if you want to add another CSS property,simply seperate between them with ; which indicates the end of the property. Anyhow,as I explained above,the code should look like this : <!DOCTYPE html> <html> <head> <script> function HideComment() { document.getElementById("hidebutton").style.display="none"; document.getElementById("button").style.display="block"; document.getElementById("hidebox").style.display="none"; } function ShowComment() { document.getElementById("hidebutton").style.display="block"; document.getElementById("button").style.display="none"; document.getElementById("hidebox").style.display="block"; } </script> </head> <body> <div style="background:silver; opacity: 0.5"> <button id="button" onclick="ShowComment()" style="height:23px"><strong>Comment</strong></button> <button id="hidebutton" onclick="HideComment()" style="display:none;height:23px"><strong>Hide</strong></button> </div> <br /> <textarea width="100" height="10" id="hidebox" style="display:none"></textarea> </body> </html>I added a height to the button because I noticed that the buttons change size once they're being clicked,so the height property should add a static height to the buttons.Also added the textdraw to the function,so it will hide & show when the button is clicked. (I guess that's what you tried to do) Edited September 23, 2013 by KubeR Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 23, 2013 Share Posted September 23, 2013 .style.display = ""; this won't do anything,but on the other hand Yes, that will do something. That will return the field back to the "default" display style. I believe it would just override any in-line applied styles. So, if there are any style properties applied through a style sheet or the head of the document then those would get applied. Quote Link to comment Share on other sites More sharing options...
KubeR Posted September 23, 2013 Share Posted September 23, 2013 Yes, that will do something. That will return the field back to the "default" display style. I believe it would just override any in-line applied styles. So, if there are any style properties applied through a style sheet or the head of the document then those would get applied.Heh,my fault,probably there was something wrong in my code when I tested it. Thanks for correcting. Quote Link to comment Share on other sites More sharing options...
Bojak Posted September 24, 2013 Author Share Posted September 24, 2013 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script> var link = GetElementById("CmtBox"); link.onclick = function link() { document.getElementById("comment").style.display = "none"; document.getElementById("comment").style.display = ""; } </script> </head> <body> <form action="test.html " method="post" title="Post Comment" > <textarea cols="41" rows="5" wrap="hard" id="comment"></textarea> <a id="CmtBox" href="link" >Comment</a> </form> </body> </html> this is what i want to do but its not referencing the function. suggestions? i changed it because i didnt like the actual button. i would like to convert it so that it does exactly what the button did in the above example. this seems to be clearner. Quote Link to comment Share on other sites More sharing options...
dalecosp Posted September 24, 2013 Share Posted September 24, 2013 (edited) Are you using a debugger? I'd expect to see some feedback/error messages. Try this? <script type="text/javascript"> var link = document.getElementById("CmtBox"); link.onclick = function () { document.getElementById("comment").style.display = "none"; }; </script>Note that the name of the function is "onclick" ... in particular, "link.onclick". Don't try an give an anonymous function another name (like "link"). Edited September 24, 2013 by dalecosp Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.