Clever Geek Handbook

Hide and show text box

I am a beginner in javascript. I want to show a hidden textbox on a click button. I do the following code but it doesn't work.

What is the problem with my code?

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
        function display() {
            var z = prompt("enter your name...");
            if(z != null) {
                document.getElementById("demo").innerHTML = "thankyou " + z + "..";
                document.getElementById("case").style.visibility = 'visible';
            } else {
                document.getElementById("demo").innerHTML = "thankyou";
            }
        }
        </script>
        <title></title>
    </head>
    <body>
        <p id="demo">
            click on the button.....
        </p><button type="button" onclick="display()">submit</button>
        <form>
            <input type="text" id="case" name="myText" style="display:none">
        </form>
    </body>
</html>
+3


source to share


4 answers


replace

document.getElementById("case").style.visibility='visible';


from

document.getElementById("case").style.display='block';
+9


source


Change the style as display block instead of visibility,

document.getElementById("case").style.display='block';


or your textbox as visibility is hidden instead of showing: none

<input type="text" name=<name> style="visibility:hidden"/>
+6


source


The following two statements will display the element with the identifier "case":

document.getElementById("case").style.display='block';

or

document.getElementById("case").style.display='';

The following statement will hide the element with the id "case":

document.getElementById("case").style.display='none';
+4


source


Display: none works fine with HTML to hide a button

0


source






More articles:


All Articles