クリックされた要素をJavaScriptで取得する

複数の同じURLのリンクがあってどれがクリックされたか判定したかった↓

イベントオブジェクトから取得

こっちはクラス名がなくてもできる。

html

            <p><a href="#" onclick="changeColor2(event)">click4!</a></p>
            <p><a href="#" onclick="changeColor2(event)">click5!</a></p>
            <p><a href="#" onclick="changeColor2(event)">click6!</a></p>

JavaScript

function changeColor2(event) {
  // event.targetでイベントが発生した要素を取得
  const link = event.target;
  link.classList.add('visited');
}

CSS

a {
  color: blue;
}

/* click済みの所を紫にする */
.visited {
  color: purple;
}

getElementsByClassNameで取得

html

            <p><a class="link" href="#">click1!</a></p>
            <p><a class="link" href="#">click2!</a></p>
            <p><a class="link" href="#">click3!</a></p>

JavaScript

// 複数のlinkクラスを配列で取得する
const link = document.getElementsByClassName('link');

for (let i = 0; i < link.length; i++) {
  // 各ボタンをイベントリスナーに登録
  link[i].addEventListener('click', function () {
    
    // visitedクラスを付与
    link[i].classList.add('visited');
  });
}

CSS

.link {
  color: blue;
}

/* click済みの所を紫にする */
.link.visited {
  color: purple;
}

参考

www.mdn.co.jp

www.javadrive.jp