JavaScript addEventListenerメソッドで関数を指定してイベントリスナを登録するサンプル
環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122（Official Build） （64 ビット）
構文
変数名 =document.getElementById(セレクタID名)
変数名.addEventListener("click",関数名)
指定セレクタIDの位置をクリック(click)すると、定義した関数名が実行されます。
使用例
<!DOCTYPE html>
<html>
<body>
<p id="pA" style="color:blue">ここの文字をクリックして下さい</p>
<p id="pB">東京</p>
<script>
const pA = document.getElementById("pA");
//イベントリスナを登録する 要素pAのクリック
pA.addEventListener("click", chgname);
// 関数chgnmaeを指定
function chgname() {
//pB要素の取得
const pB = document.getElementById("pB");
if (pB.textContent === "東京") {
pB.textContent = "tokyo";
} else {
pB.textContent = "東京";
}
}
</script>
</body>
</html>
結果
「ここの文字をクリックして下さい」をクリックすると、「東京」から「tokyo」に変わります 再度クリックすると、「tokyo」から「東京」に変わります。