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

2022年12月1日

環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122（Official Build）（64 ビット）

構文

変数名 =document.getElementById(セレクタID名)

変数名.addEventListener("click",関数名)

変数名 =document.getElementById(セレクタID名) 変数名.addEventListener("click",関数名)

変数名 =document.getElementById(セレクタID名)
変数名.addEventListener("click",関数名)

指定セレクタIDの位置をクリック(click)すると、定義した関数名が実行されます。
使用例

<!DOCTYPE html>

<html>

<body>

<p id="pA" style="color:blue">ここの文字をクリックして下さい</p>

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>

<!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>

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

「ここの文字をクリックして下さい」をクリックすると、「東京」から「tokyo」に変わります再度クリックすると、「tokyo」から「東京」に変わります。

「ここの文字をクリックして下さい」をクリックすると、「東京」から「tokyo」に変わります
再度クリックすると、「tokyo」から「東京」に変わります。

JavaScript

Posted by arkgame

関連投稿: