テキストが入力されるまでボタンを非表示にしたい。あるいは、チェックボックスが選択されるまでボタンを非表示にしたい。そのようなケースはありませんでしょうか？
本記事では、JavaScriptを使ったボタンの表示・非表示の方法をご紹介します。

表示・非表示を切り替える(visibility/display)

HTMLの要素の表示状態を切り替える方法は
visibilityを変更する方法と、displayを変更する方法の2種が存在します。
この2種の方法はどちらも対象の要素の表示状態を変更することができますが非表示になった際の振る舞いが異なります。

下記のサンプルコードでは2つのチェックボックスを使ってvisibilityとdisplayを切り替えています。
以降ではvisibilityとdisplayの使い方を紹介します。

See the Pen bu by kaz12 Tech (@kaz12-Tech) on CodePen.

visibilityを使って表示・非表示

visibilityを"hidden"にすることによって非表示、visibilityを"visible"にすることによって表示となります。 サンプルでは下記のコードで表示・非表示を切り替えています。

function set_visibility() {
  if (document.getElementById('radio_1').checked){
    // btn_1を非表示
    document.getElementById('btn_1').style.visibility = 'hidden'
  }else{
    // btn_1を表示
    document.getElementById('btn_1').style.visibility = 'visible'
  }
}

displayを使って表示・非表示

displayを"none"にすることによって非表示、visibilityを"inline"にすることによって表示となります。 サンプルでは下記のコードで表示・非表示を切り替えています。

function set_display() {
  if (document.getElementById('radio_2').checked){
    // btn_1を非表示
    document.getElementById('btn_1').style.display = 'none'
  }else{
    // btn_1を表示
    document.getElementById('btn_1').style.display = 'inline'
  }
}

visibility, displayの違い

CodePenのサンプルを動かすと一目瞭然ですが、レイアウトへの影響が異なります。

visibilityはその名前のごとく視認性を変更します。
そのため、visibility = 'hidden'を設定した際は要素は視認できないが存在する状態です。

一方でdisplayは要素の存在そのものを変更します。
そのため、display = 'none'を設定した際は、要素そのものが存在しない状態です。

この違いより全体のレイアウトへの影響が異なります。

visibilityの場合、非表示に変更した要素は存在しているため、レイアウトは影響しません。

displayの場合、非表示に変更した要素そのものが存在しない扱いになるため、空いた空間を詰めるように他の要素が移動します。

テキストが入力された場合に表示/非表示を切り替える

CodePenのwindow.addEventListener内で実現しています。

チェックボックスが入力された場合に表示/非表示を切り替える

CodePenのset_visibility()やset_display()内で実現しています。