Solved

Change / Hide text field on click

Posted on 2008-10-29
4
4,027 Views
Last Modified: 2012-05-05
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
Comment
Question by:Rassac
  • 2
4 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 125 total points
ID: 22829148
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
 
LVL 6

Assisted Solution

by:Chorch
Chorch earned 125 total points
ID: 22829151
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
 

Author Closing Comment

by:Rassac
ID: 31511084
thanks :)
0
 
LVL 82

Expert Comment

by:hielo
ID: 22831022
you are welcome
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Remove 'disabled' attribute 6 28
Mobile version of website does not react 6 56
Safari SVG Image Problem 1 21
Creating a slider 12 34
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now