このチュートリアルでは、JavaScript で onClick を設定する手順を定義します。
JavaScript で onClick を設定する方法
を設定するには オンクリック JavaScript には、次の 2 つの異なる方法があります。
- 最初の方法は、HTML 要素の オンクリック JavaScript を使用した属性。
- 2 番目の方法は、「 クリック ' イベント。
例 1: JavaScript を使用して HTML 要素の onclick 属性に値を割り当てる
HTML ファイルで、見出しとボタン「 クリックしてください ” ID付き “ js 」をクリックすると、JavaScript 関数がトリガーされます。
< h2 > 設定 JavaScript を使用した onClick プロパティ h2 >
< ボタン ID = 「js」 > クリックしてください ボタン >
次のステップでは、作成したボタンにアクセスし、「 オンクリック 」属性が付与されます。ボタンをクリックすると、指定された機能が実行され、「 style.backgroundColor 」プロパティは、ボタンの色を次のように変更します。
資料。 getElementById ( 「js」 ) . オンクリック = 関数 jsFunc ( ) {
資料。 getElementById ( 「js」 ) . スタイル . 背景色 = '紫の' ;
}
対応する出力は次のようになります。
例 2: HTML イベントにイベント リスナーを明示的に追加する
ボタンを作成する」 ここをクリック！ ” そして ID を割り当てます “ イベント 」で addEventListener() メソッドをトリガーします。 'クリック' イベント：
< ボタン ID = 'イベント' > ここをクリック 強い > ボタン 強い >>
ボタンを使用してフェッチします ID そして、「 addEventListener() ” を渡す方法 クリック 「イベントと機能」 イベント関数 ボタンの背景色が変更される場所：
資料。 getElementById ( 'イベント' ) . addEventListener ( 'クリック' 、イベント関数 ) ;関数 eventFunc ( ) {
資料。 getElementById ( 'イベント' ) . スタイル . 背景色 = '緑' ;
}
出力
例 3: すべての onClick メソッドを一度に使用する
この例では、すべてのメソッドの動作が一度に表示されます。 1 つ目は、HTML タグ自体に onclick 属性を追加するデフォルトの方法です。その後、JavaScript を使用して onclick 属性を設定する 2 つの方法についても説明しました。
次の例では、3 つのボタンを作成し、onclick 属性の機能を確認します。
- 最初のボタン「 クリック 」は「を呼び出します html関数() 」クリックイベントで。
- ボタン「 クリックしてください ” は割り当てられた ID でアクセスされます “ js 」そして、JavaScript を使用してボタンの onclick 属性に値を割り当てます。
- ボタン「 ここをクリック！ ” は id を使用してアクセスされます “ イベント 」を付けて「 addEventListener() 」 メソッドを使用します。
< ボタン ID = 「js」 > クリックしてください ボタン >< br >< br >
< ボタン ID = 'イベント' > ここをクリック ! ボタン >
以下の関数は「 オンクリック 「ボタンのイベント」 クリック 」：
関数 htmlFunc ( ) {アラート ( 「HTMLのonClickイベントでクリックされたボタン」 ) ;
}
「 クリックミー 」ボタンを押すと、警告メッセージが表示される場所で次の機能がトリガーされます。
資料。 getElementById ( 「js」 ) . オンクリック = 関数 jsFunc ( ) {アラート ( 「JavaScriptのonClick関数でクリックされるボタン」 ) ;
}
指定された機能は、ボタン「 ここをクリック！ 」：
資料。 getElementById ( 'イベント' ) . addEventListener ( 'クリック' 、イベント関数 ) ;関数 eventFunc ( ) {
アラート ( 「EventListener メソッドを使用した JavaScript onClick でクリックされたボタン」 ) ;
}
ボタンがクリックされるたびに出力に警告メッセージが表示されます。
結論
JavaScript で onclick を設定するには、2 つの異なる方法があります。最初の方法は、JavaScript を使用して HTML 要素の onclick 属性に値を割り当てる方法で、2 番目の方法は、「 クリック ' イベント。このチュートリアルでは、JavaScript で onClick を設定するメソッドと例を定義しました。