「JavaScript」イベントハンドラに関数を登録するサンプル

2022年10月1日

環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit

構文
const 変数名 = document.getElementById(セレクター名);
変数名.onclick =関数名
クリックした時、イベントハンドラに関数を登録します。

使用例

<!DOCTYPE html>

<html>

<body>

<div id="cft">文字をクリックして下さい</div>

//関数funAの定義

function funA() {

alert("test 123");

}

//getElementByIdメソッドでidセレクタ「cft」を指定

const tt = document.getElementById("cft");

//関数のfunAをイベントハンドラに登録

tt.onclick=funA;

</script>

</body>

</html>

<!DOCTYPE html> <html> <body> <div id="cft">文字をクリックして下さい</div> <script> //関数funAの定義 function funA() { alert("test 123"); } //getElementByIdメソッドでidセレクタ「cft」を指定 const tt = document.getElementById("cft"); //関数のfunAをイベントハンドラに登録 tt.onclick=funA; </script> </body> </html>

<!DOCTYPE html>
<html>
<body>

<div id="cft">文字をクリックして下さい</div>

<script>
  //関数funAの定義
  function funA() {
    alert("test 123");
  }
  //getElementByIdメソッドでidセレクタ「cft」を指定
  const tt = document.getElementById("cft");
  //関数のfunAをイベントハンドラに登録
  tt.onclick=funA;
</script>

</body>
</html>

実行結果
div要素「cft」をクリックすると，
「test 123」というメッセージが表示されます。

JavaScript

Posted by arkgame

関連投稿: