Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
298 views
in Technique[技术] by (71.8m points)

javascript - conditional display of html element forms

Well, after a one hour introduction to javascript, I ve come up with the following code. It did what I wanted alright, but then I wanted something else and it wont work.

I wanted that upon clicking on a button, a certain field would hide and on clicking on another yes, another one would hide too, BUT, of course, it had to make the other show, otherwise we would end up with nothing and the purpose was to present different fields depending on what the user clicked (on a radio button) So in a childish way I made my code and it worked. But then it came to me that I wanted first to have boths fields hidden instead of both fields shown, and here is the issue. I added a 0 value to the parameter of the function "telling it" that when x = 0, then visibility = hidden. But it wont listen to me!, So, the part of the code when it says x = 1 and 2 works, the one about 0, does not.

It is such a simple code that can make someone smile, but heck, it was clean and it worked. Does anyone know how to have the fields hidden before clicking on the buttons ?

Thanks a lot I remove some tags of the HTML

<html>
    <head>
        <script language="javascript">
            var x = 0;

            function hola(x) {
                if(x == 0) {
                    document.getElementById("cont1").style.visibility="hidden";
                    document.getElementById("cont2").style.visibility="hidden";
                }

                if(x == 1) {
                    document.getElementById("cont1").style.visibility="visible";
                    document.getElementById("cont2").style.visibility="hidden"; 
                }

                if(x == 2)  {
                    document.getElementById("cont1").style.visibility="hidden";
                    document.getElementById("cont2").style.visibility="visible"; 
                }
            }
        </script>
    </head>

    <body>
        <input type="button" onclick="hola(1)" value="hidefield2" id="boton1">
        <div id="cont1">
            <input type="text">
        </div>

        <input type="button" onclick="hola(2)" value="hidefield1" id="boton2">

        <div id="cont2">
            <input type="text">
        </div>
    </body>
<html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

What worked:

You had two buttons, both visible in the beginning. And on click of one button, you hid a div, and made another visible.

Now you need a situation when the divs should be hidden in the beginning, and then show when you click a button.

By default, for all elements where a explicit visibility attribute is not given, visibility is considered to be visible.

To make the button invisible, you need to add visibility:hidden to the button.

You can do it two ways:

  1. In the code for the divs, make then "invisible by default" by adding style='visibility:hidden'.

  2. Add another javascript function that is called on load of the page, and makes both the divs invisible:

    function hideBoth()  {  
       document.getElementById("cont1").style.visibility="hidden";  
       document.getElementById("cont2").style.visibility="hidden";   
    }
    

Call it on load of your page: <body onload='hideBoth()'>


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...