web-dev-qa-db-ja.com

HTML要素フォームの条件付き表示

さて、javascriptを1時間紹介した後、次のコードを思いつきました。それは私が望んでいたことを大丈夫にしたが、それから私は何か他のものが欲しかったのでそれはうまくいかなかった。

ボタンをクリックすると特定のフィールドが非表示になり、別のはいをクリックすると別のフィールドも非表示になることを望んでいましたが、もちろん、他のショーを作成する必要がありました。ユーザーが（ラジオボタンで）クリックしたものに応じて異なるフィールドを表示することでした。それで、幼稚な方法でコードを作成し、それが機能しました。しかし、最初に両方のフィールドを表示するのではなく、両方のフィールドを非表示にしたいということになりました。これが問題です。関数「tellingit」のパラメーターに0の値を追加しました。これは、x = 0の場合、可視性=非表示になります。しかし、それは私に耳を貸しません！、それで、x = 1と2が機能するというコードの部分、つまり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>
javascriptconditionalvisibility
9
Alvaro

何働いた：
2つのボタンがあり、どちらも最初に表示されていました。そして、1つのボタンをクリックすると、divが非表示になり、別のdivが表示されます。

ここで、最初にdivを非表示にして、ボタンをクリックしたときに表示する必要がある状況が必要です。

デフォルトでは、明示的なvisibility属性が指定されていないすべての要素について、visibilityはvisibleと見なされます。

ボタンを非表示にするには、ボタンに_visibility:hidden_を追加する必要があります。

あなたはそれを2つの方法で行うことができます：

  1. divsのコードで、_style='visibility:hidden'_を追加して「デフォルトで非表示」にします。

  2. ページの読み込み時に呼び出される別のjavascript関数を追加し、両方のdivを非表示にします。

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

ページの読み込み時に呼び出します：<body onload='hideBoth()'>

9
Nivas

この行：

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;">
3
Gabriel McAdams

Jqueryを使用してこれを行うこともできます！以下は、基本的にCSSの入力を受け取り、それを表示または非表示にする例です。

function checkPrerequisites() {
  // The 4th line makes objects visible in the for loop.
  // Determines if pre-requisites are met and if so - makes div draggable
  // for new courses 

  for (var i = 0; i < courselist.length; i++) {
    if (prerequisitesMet(i)) {
      $('#' + i.toString()).css("background-color", "lightgreen");
      $('#' + i.toString()).css("visibility", "visible");
      $('#' + i.toString()).draggable();
    }
  }
}
0
user9278128