• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4039
  • Last Modified:

Change / Hide text field on click

Hi,

I have the below code which works well to show the hidden text field but once the field is changed to inline-block it cannot be reverted back to hidden.

Can you please provide suggestions? Thanks.
function Change(){
if (document.getElementById( "myId" ).style.display = "none")
	{
		document.getElementById( "myId" ).style.display = "inline-block"; 
	}
else
 
if (document.getElementById( "myId" ).style.display = "inline-block")
	{
		document.getElementById( "myId" ).style.display = "none"; 
	}
}
 
<BODY>
 
<tr>
 
<td>
<input type="button" onclick="Change();" value="Click Me">
</td>
 
<!--<input type="button" onclick="Hide();" value="Java Hide"> -->
 
<td><input type=text id="myId" style="display:none"></input></td>
 
</tr>
 
</BODY>
</HTML>

Open in new window

0
Rassac
Asked:
Rassac
  • 2
2 Solutions
 
hieloCommented:
try:
<html>
<head>
<script type="text/javascript">
function Change(){
if (document.getElementById( "myId" ).style.display == "none")
      {
            document.getElementById( "myId" ).style.display = "inline-block"; 
      }
else if (document.getElementById( "myId" ).style.display == "inline-block")
      {
            document.getElementById( "myId" ).style.display = "none"; 
      }
}
 </script>
 </head>
<BODY>
 
<tr>
 
<td>
<input type="button" onclick="Change();" value="Click Me">
</td>
 
<!--<input type="button" onclick="Hide();" value="Java Hide"> -->
 
<td><input type=text id="myId" style="display:none"></input></td>
 
</tr>
 
</BODY>
</HTML>

Open in new window

0
 
ChorchCommented:
Hello,

I use this funtion which can show/hide many different elements in page:

<script type="text/javascript">
var state = 'none';
function showhide(divname) {
      if (state == 'block') {
            state = 'none';
      }
      else {
            state = 'block';
      }
      if (document.all) {
            eval("document.all." + divname + ".style.display = state");
      }
      if (document.layers) {
            document.layers[divname].display = state;
            
      }
      if (document.getElementById &&!document.all) {
            document.getElementById(divname).style.display = state;
      }
}
</script>
===================
<input type="button" onclick="showhide('myId');" value="Click Me">

Regards
0
 
RassacAuthor Commented:
thanks :)
0
 
hieloCommented:
you are welcome
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now