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

onClickイベントからJavaScript関数を呼び出す方法をわかりやすく解説

onClickイベントは、Web開発において最も頻繁に使用されるイベントの一つです。ユーザーがマウスの左ボタンをクリックした瞬間に発生し、フォーム送信前の入力値チェック（バリデーション）や警告メッセージの表示など、さまざまな処理を組み込むことができます。

onClickイベントの基本

HTML要素にonclick属性を設定し、そこに実行したいJavaScript関数名を指定するだけで、クリック時に関数を呼び出せます。ボタンやリンク、画像など、ほぼすべてのHTML要素に適用可能です。

サンプルコード

以下のコードでは、ボタンをクリックするとdisplay()関数が実行され、「Hello World」というアラートが表示されます。実際にブラウザで動作を確認してみてください。

<html>
   <head>
      <script>
         <!--
            function display() {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   <body>
      <p>Click the following button and see result</p>
      <form>
         <input type="button" onclick="display()" value="Click me" />
      </form>
   </body>
</html>

コードのポイント

  • <head>内で関数を定義： display()関数をscriptタグ内に記述しています。クリックされたときに初めて呼び出されるため、ページ読み込み時には実行されません。
  • onclick属性で関数を指定： <input type="button">のonclick属性に「display()」と記述することで、クリック時に関数が発火します。
  • alert()で結果を表示： 関数内のalert("Hello World")により、クリック後にポップアップが表示され、動作がひと目で確認できます。

このように、onClickイベントを使えば、ユーザーの操作に応じたインタラクティブな処理を簡単に実装できます。まずはシンプルなアラート表示から試して、徐々にバリデーションや画面更新など、実用的な処理へと発展させていきましょう。

  1. JavaScriptである関数から別の関数へイベントオブジェクトを渡す方法

    JavaScriptでは、イベントハンドラ内で取得したイベントオブジェクトを、そのまま引数として別の関数へ渡すことができます。イベントオブジェクトには発生元の要素（event.target）やイベントの種類などの情報が含まれているため、複数の関数で同じイベント情報を共有したい場合にとても便利です。以下は、クリックイベントのイベントオブジェクトを受け渡し、ボタンのフォントサイズと文字色を変更するサンプルコードです。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset=

  2. 【JavaScript入門】onclick()でボタンクリック時に関数を呼び出す方法

    はじめにWebページのボタンがクリックされたときに、特定の関数を実行したい場面は非常によくあります。JavaScriptでは、HTML要素のonclick属性に関数名を指定するだけで、この動作を簡単に実現できます。例えば、次のようなボタンがあるとします。<button onclick="displayingMessageOnButtonClick()">押してください</button>このボタンがクリックされた際に、指定した関数を呼び出すことが目的です。コード例以下がその完全なサンプルコードです。<!DOCTYPE html> <h