JavaScriptで要素を非表示・表示するボタン

このセクションでは、ページ上の要素を非表示にしたり表示したりする方法を学びます。 いつものように、簡単なものから始めて、徐々に複雑にしていきましょう。

ウォーミングアップとして、段落と2つのボタンがあるとします：

html<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">

要素への参照を変数に取得しましょう：

javascriptlet elem = document.querySelector('#elem');
let show = document.querySelector('#show');
let hide = document.querySelector('#hide');

次に、一方のボタンをクリックすると段落が非表示になり、 もう一方のボタンをクリックすると表示されるようにしてみましょう。 そのために、要素に対応するCSSクラスを追加または削除します：

css.hidden {
  display: none;
}

タスクを解決しましょう：

javascripthide.addEventListener('click', function() {
  elem.classList.add('hidden');
});

show.addEventListener('click', function() {
  elem.classList.remove('hidden');
});