textarea wont hide

Bojak · 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?

jazzman1 · September 21, 2013

Don't duplicate posts and waste our time, please!

Psycho · September 21, 2013

My guess would be that you don't have any functions to hide the textarea.

KubeR · September 23, 2013

First of all:
```
ShowCommet
```
Your 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

Psycho · 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.

KubeR · 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.

Bojak · 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.

dalecosp · September 24, 2013

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

Sign In

textarea wont hide

Recommended Posts

Bojak

Link to comment

Share on other sites

jazzman1

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

KubeR

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

KubeR

Link to comment

Share on other sites

Bojak

Link to comment

Share on other sites

dalecosp

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information