「JavaScript」.onclick で イベントハンドラを登録するサンプル

書式
1.document.getElementById(セレクタID名)
対象となるhtml要素buttonを取得します
2.onclick = function(){処理コード}
buttonがクリックされると、onclickプロパティに登録された処理が実行されます。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<button id="btnTest">検証</button>
<script>
window.onload = function(){
document.getElementById('btnTest').onclick = function(){
alert('ボタンクリックイベントが発生しました');
}
}
</script>
</body>
</html>
<!DOCTYPE html> <html> <body> <button id="btnTest">検証</button> <script> window.onload = function(){ document.getElementById('btnTest').onclick = function(){ alert('ボタンクリックイベントが発生しました'); } } </script> </body> </html>
<!DOCTYPE html>
<html>
<body>
<button id="btnTest">検証</button>
<script>
  window.onload = function(){
    document.getElementById('btnTest').onclick = function(){
      alert('ボタンクリックイベントが発生しました');
    }
  }
</script>

</body>
</html>

動作結果
「検証」ボタンがクリックされると、「クリックイベントが発生しました」というメッセージボックスが表示されます。

JavaScript

Posted by arkgame