JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでクリック時に関数を呼び出す方法【onclickの使い方を解説】

JavaScriptでクリック時に関数を呼び出す基本方法

JavaScriptでボタンがクリックされたタイミングで関数を実行したい場合は、onclick属性を使用します。HTMLのbutton要素などに onclick="関数名()" と記述するだけで、クリックイベントに関数を簡単に紐づけることができます。

以下は、ボタンをクリックすると sayHello() 関数が呼び出され、画面にメッセージが表示されるシンプルな例です。実際にコードを保存してブラウザで動作を確認してみてください。

サンプルコード

<html>
   <head>
      <script>
         function sayHello() {
            document.write ("Hello there!");
         }
      </script>
   </head>
   <body>
      <p>次のボタンをクリックすると関数が呼び出されます</p>

      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello">
      </form>

      <p>writeメソッドの中身を別のテキストに変えて試してみましょう</p>
   </body>
</html>

コードのポイント

  • <head>内の<script>タグで、sayHello()関数を定義しています。
  • <input type="button">にonclick="sayHello()"を指定することで、クリックした瞬間に関数が実行されます。
  • document.write()は、ページに文字列を出力するためのメソッドです。

より推奨される方法：addEventListener

HTMLに直接JavaScriptを記述するインライン方式は手軽ですが、HTMLとJavaScriptを分離できるaddEventListenerを使う方法が、現在ではより一般的で保守性の高い書き方とされています。

<button id="helloBtn">Say Hello</button>
<script>
   document.getElementById("helloBtn").addEventListener("click", function() {
      alert("Hello there!");
   });
</script>

addEventListenerを利用すれば、同じ要素に対して複数のイベントハンドラを登録できるほか、HTML構造とスクリプトを明確に分離できるため、規模の大きな開発でも管理しやすいコードになります。まずはonclickで基本を理解し、慣れてきたらaddEventListenerへの置き換えにも挑戦してみてください。

  1. クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説

    JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。たとえば、ページが読み込まれること自体もイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもイベントとして扱われます。このほかにも、キーボードのキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなど、さまざまな操作がイベントとして検出されます。onclickイベントとはonclick()イベントは、ユーザーがマウスの左ボタンをクリックした瞬間に発生するイベントです。フォーム送信前の入力値チェック（バリデーション）や、警告メッセージの表示など、ク

  2. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ