条件显示html元素表单 [英] conditional display of html element forms

查看:149
本文介绍了条件显示html元素表单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

好吧,经过一小时的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时,则visibility = hidden。但是它不会听我的!所以,当代码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>


推荐答案

工作:< br>
你有两个按钮,两个按钮都在开头可见。点击一个按钮,你隐藏了一个div,并使另一个可见。

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.

现在你需要一种情况,当div应该隐藏在开头,然后显示当您单击按钮时。

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.

要使按钮不可见,您需要在按钮上添加 visibility:hidden

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

您可以通过两种方式实现:

You can do it two ways:


  1. 在<$ c的代码中$ c> div s,然后通过添加
    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()'>

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

这篇关于条件显示html元素表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆