【JavaScript】ボタンクリックで別の要素にclassが追加・削除されるサンプルコード

ボタンを偶数回（奇数回）クリックすると、別の要素にclassが追加・削除されるサンプルコードを紹介します。

jQueryなどのライブラリなどは使わず、JavaScript単体で実現できるので簡単に実現できます。

ボタンクリックでclassが追加・削除されるサンプルコード

「偶数回」でclassを追加・削除する場合は下記のようなコードになります。

HTML

<button class="myButton">クリック</button>
<div class="myElement">追加される要素</div>

CSS

.highlight {
  background-color: yellow;
}

JavaScript

var button = document.querySelector(".myButton");
var elements = document.querySelectorAll(".myElement");
var clickCount = 0;

button.addEventListener("click", function() {
clickCount++;

if (clickCount % 2 === 0) {
elements.forEach(function(element) {
  element.classList.add("highlight");
});
} else {
elements.forEach(function(element) {
  element.classList.remove("highlight");
});
}
});

このコードでは、querySelectorを使用してクラス名がmyButtonである最初の要素を取得し、buttonに格納します。また、querySelectorAllを使用してクラス名がmyElementであるすべての要素を取得し、elementsに格納します。

クリックイベントのリスナーでは、クリック回数が偶数の場合にのみ、elements内のすべての要素にクラスhighlightを追加します。クリック回数が奇数の場合は、クラスが削除されます。

「奇数回」の場合は以下のようになります。

var button = document.querySelector(".myButton");
var elements = document.querySelectorAll(".myElement");
var clickCount = 0;

button.addEventListener("click", function() {
clickCount++;

if (clickCount % 2 === 1) {
elements.forEach(function(element) {
  element.classList.add("highlight");
});
} else {
elements.forEach(function(element) {
  element.classList.remove("highlight");
});
}
});