JavaScript addEventListenerメソッドで関数を指定してイベントリスナを登録するサンプル

2022年12月1日

環境
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」から「東京」に変わります。

JavaScript

Posted by arkgame

関連投稿: