<JavaScript>ボタンを押して表示・非表示を切り替え

/*今回のエントリからプログラミングに関するエントリはタイトルに言語を書くことにしました、過去分は徐々に書き足していきます*/

                                      • -

2019/08/12
新しくスクリプトを作成しました。
poolbooyer.hatenablog.jp

                                    • -

表示・非表示切り替え

今回はJavascriptで画面表示と非表示を切り替えるスクリプトを書きました。

完成したスクリプトでやること

  • ボタンを押すと表示
  • 再度押すと非表示

スクリプトでやること

  • 切り替える対象の情報の取得
  • 切り替える対象のスタイルの取得
  • 取得したスタイルについて判別
  • 取得した対象を切り替え

実際に書いたスクリプト

htmlのコード(抜粋)

表示と非表示と切り替えるボタンと実際に切り替える対象を記述しました。
最初の時点では非表示にしています。
divのstyleに関する記述はしなくても動きます。

<button name="hoge" class="hoe" onclick="display()">hhhh</button>
<div id="view" style="display: none;">
    <p>hogehoge</p>
</div>
JavaScriptのコード

切り替える対象の要素全体を取得します。
取得した要素の中から表示に関するスタイルの情報を取得しました。
取得したスタイルの情報から表示中か非表示中か判別し、表示・非表示を切り替えます。

var display=function() {
    //切り替える対象の状態を取得
    var div = document.getElementById('view');
    //取得した情報からスタイルについての状態のみをstateに代入
    state=div.style.display;
    //デバッグ用にlogに出力
    console.log(state);
    //非表示中のときの処理
    if(state=="none"){
         //スタイルを表示(inline)に切り替え
         div.setAttribute("style","display:inline");
        //デバッグ用にinlineをlogに出力
        console.log("inline");
    }else{
         //スタイルを非表示(none)に切り替え
        div.setAttribute("style","display:none");
        //デバッグ用にnoneをlogに出力
        console.log("none");
    }
}

実際の動作時の画面

今回はスクショのみです

サイトを開いたときの画面

f:id:poolbooyer:20180709130520p:plain
表示されるのはボタンだけです

ボタンを一度押したときの画面

f:id:poolbooyer:20180709130703p:plain
hogehogeが表示されます
consoleにも状態が表示されます

ボタンを再度押したときの画面

f:id:poolbooyer:20180709130825p:plain
hogehogeが隠されました。
consoleにも非表示の処理を行ったメッセージが表示されます

              • 追記--------------

改良した記事
poolbooyer.hatenablog.jp