スタートページ＞ Javascript

表示・非表示

記述した場所で表示・非表示にする

ＨＴＭＬのある部分を表示・非表示反転をさせたいことがよくあります。
次の［解答表示］の部分をクリックしてください。解答が表示されます。クリックを繰り返すと表示・非表示が反転します。

次の計算で正しいものはどれか。
　　ア　１＋１＝２
　　イ　１＋１＝３
［解答表示］

<script type="text/javascript">
    function 表示反転(対象ＩＤ) {                                         // Ａ
        if (document.getElementById(対象ＩＤ).style.display == "none") {  // Ｂ
            document.getElementById(対象ＩＤ).style.display = "block";
        }
        else {
            document.getElementById(対象ＩＤ).style.display = "none";     // Ｃ
        }
    }
</script>

<a href="Javascript:表示反転('解答');">［解答表示］</a>　　         <!-- Ｄ --> 
<div id="解答" style="display:none">                                <!-- Ｅ -->
<p>正解は［ア］です。</p>
</div>

• Ｄの［解答表示」をクリックすると、表示・非表示の対象となるＥの id="解答" の「解答」を引数として、スクリプト「表示反転」が呼び出されます。引数「対象ＩＤ」は "解答" になっています。
• document.getElementById("解答") は「Ｅの個所」のことです。style.display その個所の
  　　<style>
  　　　.display {……}
  　　　　：
  に相当するような意味です（正確ではない）
  　　block：表示
  　　none： 非表示
• Ｂは、「もし、その個所が非表示の状態ならば表示にせよ」という意味、Ｃは「（表示の状態ならば）非表示にせよ」という意味です。
• Ｅの style="display:none" は初期状態の設定です。この場合は非表示にしてあります。初期状態を表示にするのであれば style="display:block" にします。

異なる場所に表示

上の例では、非表示になっている部分を、その場所で表示する方法でした。
　ここでは、非表示の内容を異なる場所に表示することを考えます。

実例：次のボタンをクリックすると、右側の「表示場所です」に文章が表示されます。

この仕組みは次のようになっています。
上の文章は下の灰色の場所に記述されています。
アにより、その下のdiv（非表示になっている）部分が指定され、イの「説明内容」に渡されます。
イの右辺は、「説明１の内容です。」になるので、イの左辺は、次のようになります。
　　　document.getElementById("表示場所").innerHTML = "説明１の内容です。";
これにより、ウの「表示場所です」が「説明１の内容です。」に変更されます。

function 表示(内容) {
    document.getElementById("表示場所").innerHTML = document.getElementById(説明内容).innerHTML;　　・・・イ
}
-------
説明１←<button onClick="表示('説明１')">説明１</button>　　・・・ア
<div id="説明１" style="display: none">
説明１の内容です。
</div>　　　　　　　　　　　　　　　　　　　　<div id="表示場所">表示場所です</div>　　・・・ウ
説明２←<button onClick="表示('説明２')">説明２</button>
<div id="説明２" style="display: none">
説明２の内容です。
</div>