HTMLとJavaScriptを使用したボタンクリックの処理方法

2024-02-10 00:07 HTML JavaScript ボタンクリック
  1. HTMLボタンのクリックイベントハンドラーを使用する方法: HTMLのボタン要素には、"onclick"属性を使用してクリックイベントハンドラーを設定することができます。以下は例です。
<button onclick="myFunction()">クリック</button>
<script>
function myFunction() {
  // ここにボタンがクリックされた時に実行したい処理を記述します
  alert("ボタンがクリックされました！");
}
</script>
  1. JavaScriptのaddEventListener()メソッドを使用する方法: JavaScriptのaddEventListener()メソッドを使用して、ボタンのクリックイベントに対する処理を設定することもできます。以下は例です。
<button id="myButton">クリック</button>
<script>
document.getElementById("myButton").addEventListener("click", myFunction);
function myFunction() {
  // ここにボタンがクリックされた時に実行したい処理を記述します
  alert("ボタンがクリックされました！");
}
</script>

これらの方法を使用すると、ボタンがクリックされた時に任意の処理を実行することができます。必要に応じて、実際の処理を追加してください。