クリックイベント 発火させたい。

CSS, HTML, Javascript

みなさん、イベント発火させてますか？

最近Javascriptを少しずつ理解し始めたので忘れないようにここで発火させたいと思います。

HTML

<p id="hoge">Hello world!</p>

idさえあれば何でもいいんですよ、ぼかぁー。

CSS

#hoge {
  cursor: pointer;
}

マウスカーソルをポインターにします。なんとなく気分がいいので。

Javascript

//hogeは#hogeだぞ宣言。
const hoge = document.querySelector('#hoge');

//hogeがクリックされたら...
hoge.addEventListener('click', e => {

  //クラスに"on"を追加、あれば削除
  hoge.classList.toggle('on');

  //もし"on"があれば？
  if( hoge.classList.contains('on') == true ){

    //hogeの中身を以下に
    hoge.innerHTML = 'こんにちは、世界！';

  } else {

    //hogeに"on"がなけりゃ以下を
    hoge.innerHTML = 'Hello world!';

  }
});

クリック毎にでクラスの追加、削除をさせて文字を切り替えてます。

コメントは自分の脳内で発している言葉をそのまま記述させていただきました。
あしからず。

サンプル

とりあえずできてるでしょ？

ねえ？

おわり