html元素表单的条件显示

那么，在一个小时的javascript介绍之后，我想出了下面的代码。它做了我想要的东西，但后来我想要别的东西，它不会工作。html元素表单的条件显示

我想要点击一个按钮后，某个字段会隐藏，点击另一个字段时，另一个字段也会隐藏起来，但是，当然，它必须让另一个字幕显示，否则我们会以没有什么，目的是根据用户点击的内容呈现不同的领域（在单选按钮上）。因此，以幼稚的方式，我制作了自己的代码并且工作正常。但是后来我发现，我希望首先隐藏两个字段，而不是显示两个字段，这是问题所在。我向函数“告诉它”的参数添加了一个0值，当x = 0时，那么visibility = hidden。但它不会听我说的，所以，当x = 1和2表示x = 1时，代码的一部分不起作用，而0则不起作用。

这是一个简单的代码，可以让某人微笑，但嘿，它很干净，它的工作。有人在点击按钮之前知道如何隐藏这些字段吗？

非常感谢我删除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>

来源

2010-10-18 Alvaro

不要你认为你应该实际**调用**作为参数在某一点的功能？ – Pointy 2010-10-18 17:09:42

您好，感谢您花时间浏览我的问题。根据你的评论，我认为我在一开始就这样做了，我已经把x = 0，但现在你已经说了，我开始认为这个变量没有权力跨过开始的那一行函数，也就是说，函数可能不知道上面0到x行的分配。因此，如果默认是自然的，可见性可见，这就是为什么，因为没有进一步的分配，那么它保持不变。那么对行为的解释可能必须是在函数之前声明的X值= 0不是全局的。 – Alvaro 2010-10-19 10:27:19

什么工作：
你有两个按钮，在开始的时候都可见。点击一个按钮后，你隐藏了一个div，并且再次可见。

现在你需要一个情况，当div应该隐藏在开头，然后显示你点击一个按钮。

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

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

你可以做到这一点有两种方式：

在为div是代码，加入 style='visibility:hidden'使然后“在默认情况下不可见”。

添加另一个javascript函数被调用页面的加载，使双方的div无形：

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

调用它在你的页面的加载：<body onload='hideBoth()'>

来源

2010-10-18 17:26:13 Nivas

感谢你们两位评论者：我的结论与你们的提案合作之后是：1）我认为问题的原因是x = 0的分配将不起作用，尽管明显存在这样的呼叫是X被放置在外面在函数的开始之前。 2）如果我内嵌隐藏在html标签中的可见性，尽管它隐藏了它，但它不会在点击按钮时显示。 3）最后，从主体的onload调用函数和hideboth函数的添加取得了诀窍。非常感谢你。阿尔瓦罗 – Alvaro 2010-10-19 10:37:41

的一些标记该行：

document.getElementById("cont1").style.visibility="hidden";

添加此：

style="visibility: hidden;"

这样：

<div id="cont1">

，使它看起来像这样：

<div id="cont1" style="visibility: hidden;">

你可以自己做，只是通过添加属性到您的HTML标签。

哦，是的，这一点：

<div id="cont1">

是一样的：

<div id="cont1" style="visibility: visible;">

来源

2010-10-18 17:08:29

html元素表单的条件显示

回答

相关问题