JavaScriptのきほん

clickイベントのthisはアロー関数では使えない

e.targetで受け取る

markup
//通常
<button id="func" value="button func">function(e)</button>
//アロー関数
<button id="arrow" value="button arrow">(e)=></button>

result <input type="text" id="result">

js
const result = document.getElementById("result");
//通常
const funcBtn = document.getElementById("func");
funcBtn.addEventListener("click", function (e) {
  result.value = this.value;
});
//アロー関数
const arrowBtn = document.getElementById("arrow");
arrowBtn.addEventListener("click", (e) => {
  result.value = e.target.value;
});

子要素のクリックでイベント発動させたくない場合は、e.currentTarget プロパティを使用。

取得したクラスのループ

const eles = document.getElementsByClassName(className);
for (var i = 0; i < eles.length; i++) {
  eles[i].classList.remove("myChoice");
}