JavaScriptを学ぶ③（toggle 定数を使ってみよう♪）

<script>
  'use strict';
  const hitokage = document.getElementById('target');

  hitokage.addEventListener('click',function(){
     hitokage.classList.toggle('circle')
  });
</script>

今回、新しく勉強したのは、toggleと定数です♪
※定数については、ある程度勉強しているので、説明は割愛します。

＜説明＞
addではなく、toggleに変更したことで、
CSSクラスがついていなかったらつける
CSSクラスがついていたら外す　という状態になります♪

#toggleについて

toggleは、クリックなどの同じ操作によって、
二つの状態を交互に切り替えられるような仕組みのことだそうです。
メディアプレーヤーの再生と一時停止を切り替えるボタンなどによく使われるみたい

今回はアレンジなしにしますが、
toggleの使い方を検索するとメニューの表示・非表示を、
jQueryで使用することが多そうです(^^)
以下の記事がすごく分かりやすかったので、ご参考までに♪
jQueryのtoggleで表示・非表示を切り替えてみよう

では、続きは次回にしていきましょう