html元素表单的条件显示

2022-01-20 00:00:00 conditional javascript visibility

好吧，经过一小时的 javascript 介绍，我想出了以下代码.它做了我想做的事，但后来我想要别的东西，但它不起作用.

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.

我希望在单击一个按钮时，某个字段会隐藏，而在单击另一个是时，另一个字段也会隐藏，但是，当然，它必须进行另一个显示，否则我们将一无所有目的是根据用户单击的内容(在单选按钮上)呈现不同的字段所以我以一种幼稚的方式编写了我的代码并且它有效.但后来我想到，我想首先隐藏两个字段而不是显示两个字段，这就是问题所在.我在告诉它"函数的参数中添加了一个 0 值，当 x = 0 时，可见性 = 隐藏.但它不会听我的！所以，当它说 x = 1 和 2 的代码部分有效，关于 0 的部分无效.

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 ?

非常感谢我删除了 HTML 的一些标签

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>

推荐答案

什么有效:

你有两个按钮，一开始都是可见的.单击一个按钮，您隐藏了一个 div，并使另一个可见.

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

现在您需要一种情况，即 div 应该在开始时隐藏，然后在您单击按钮时显示.

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

默认情况下，对于所有未给出显式 visibility 属性的元素，visibility 被认为是 visible.

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

要使按钮不可见，您需要将 visibility:hidden 添加到按钮.

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

你可以通过两种方式做到这一点:

You can do it two ways:

  1. 在 div 的代码中，添加默认不可见"style='visibility:hidden'.

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

添加另一个在页面加载时调用的 javascript 函数，并使两个 div 不可见:

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";   
}

在加载页面时调用它:<body onload='hideBoth()'>

相关文章