addEventListenerメソッドを使ったクリックイベント

「Hello world!」をクリックすると「こんにちは、世界！」と文字が変わるイベント

html

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

css

# hoge {
  color: red;
  cursor: pointer;
}

Javascript

#hogeをクリックするたびにクラスonの追加と削除を行います。
もしonが含まれていたら「こんにちは、世界！」、それ以外は「Hello world!」と表示します。

javascript

const hoge = document.querySelector('#hoge');
hoge.addEventListener('click', e => {
	hoge.classList.toggle('on');
	if( hoge.classList.contains('on') == true ){
		hoge.innerHTML = 'こんにちは、世界！';
	} else {
		hoge.innerHTML = 'Hello world!';
	}
});

サンプル

See the Pen BapWrwM by reirei (@sugoi-reirei) on CodePen.