[js基礎]　クリックしたらテキストの色が変わる実装

最近Javascriptでの実装が増えてきました。
ということでアウトプットも兼ねて、jsについてまとめます。

まずは全てのベースとなる、ボタンをクリックしたらテキストの色を変えるよ〜〜

ボタンクリックでテキストの色変えるよ〜〜

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

早速コードはこんな感じです。
ボタンをクリックするとテキストの色が変わります。

ボタンをクリックした時に「is-click」というクラスをpタグにつけ外しして、色を変えている。
↓この部分

button.addEventListener("click", function () {
  text.classList.toggle("is-click");
});

.classList.toggleというメソッドを使うと、クリックする度に()の中のクラスがつけ外しされます。
css側で事前に、is-clickが付与された時の色を指定することで変化するという実装です。
↓この部分

.text.is-click {
  color: red; /* クリック時の色 */
}

こんな感じで、クリックする度にテキストの色が変わる実装をまとめました。
これを応用すると、ボタンをクリックした時にモーダルを開閉したり、チェックボックスを表示させたりという実装ができます。

まとめ

以上今回は、jsでボタンをクリックした時にテキストの色を変える実装についてまとめました。

またjsについてまとめた記事を書きます！