Onclick Javascript

| | | |

onclick JavaScriptイベントは、ユーザーがボタンまたはその他のWeb要素をクリックしたときに機能を実行します。このメソッドは、HTMLドキュメントとJavaScriptドキュメントの両方でインラインで使用されます。

JavaScriptでコーディングする場合、ユーザーがWebページを操作するときにコードを実行するのが一般的です。たとえば、ユーザーがボタンを押したときに何かが発生したい場合があります。しかし、JavaScriptではどのようにしたらよいでしょうか?

この機能を実装します

ここで「onclick()」イベントが役立ちます。 onclickイベントは、最も一般的に使用されるイベントタイプの1つです。 onclickを使用すると、ユーザーがWebページ上のボタンやその他の要素をクリックしたときにコードを実行できます。

この短いガイドでは、onclick機能のしくみについて説明します。コードでonclickを使用して、Webサイトをインタラクティブにする方法を説明します。

イベントの更新

OnclickはJavaScriptイベントの一種です。イベントはブラウザで発生するアクションであり、ユーザーまたはブラウザ自体が開始できます。ユーザーがボタンをクリックしたり、フォームを送信したり、キーボードのキーを押したりすることはすべて、実行中のイベントの例です。このチュートリアルでは、最初のチュートリアル、つまりユーザーがアイテムをクリックすることに焦点を当てます。

イベントを使用して、開発者はWebページをインタラクティブにすることができます。ユーザーがボタンをクリックしたときにフォームを表示したり、ユーザーがフォームを送信したときにメッセージを表示したりできます。

イベントには、イベントハンドラーとイベントリスナーの2つの主要コンポーネントがあります。

ボタンをクリックするか、キーを押すか、アイテムにカーソルを合わせると、イベントが実行されます。イベントハンドラーは、イベントの開始時に実行されるコードです。たとえば、ボタンをクリックすると、イベントハンドラーが実行されます。

リスナーイベントはアッシュツリーとmd;ボタンのようなアイテム-それは「リッスン」し、操作するまで待機します。次に、リスナーはイベントハンドラーを実行します。

JavaScriptonclick

ボタンまたは他のWeb要素をクリックすると、JavaScriptイベントが関数を実行します。たとえば、onclickイベントにより、ボタンを押すとダイアログボックスが表示される場合があります。

HTMLのonclickメソッドの構文は次のとおりです。

この HTMLボタンをクリックすると、「codetorun」JavaScript関数が実行されます。 onclickは、divなどの他の要素と一緒に使用できます。 onclickはボタン専用ではありません。

SimpleJavaScriptでonclickを使用することもできます。 onclickJavaScriptメソッドの例を次に示します。

JavaScriptメソッドgetElementByIdを使用して要素を取得します私たちのウェブページの。 IDが「button」の要素をクリックすると、onclick関数が実行されます。

onclickボタンのJavaScriptの例

要素または段落をクリックします。 onclick属性を使用して、この機能をWebサイトに実装できます。ボタンといくつかのテキストを含むHTMLページから始めましょう。イベントコードを含むJavaScriptファイルも作成します。

これは基本的なWebページの例ですが、まだインタラクティブではありません。このWebページを実行すると、ボタンとテキストが表示されますが、ボタンをクリックしても何も起こりません。これは、onclickスクリプト関数をまだ実装していないためです。

これで、Webページの準備が整いました。 onclickイベントの作成を開始できます。最初にonclick()イベントリスナーをボタンに追加する必要があります。このイベントは、ユーザーがボタンをクリックしたときにリッスンします。

changeParagraph()イベントのコードを含む「onclick.js」ファイルを作成しましょう。このイベントはテキストを変更します段落(「p」要素)を他の何かに変換します。

changeParagraphと呼ばれるJavaScript関数を定義しました。 JavaScript querySelectorメソッドを使用して、ページ上の段落を選択します。最初にページを読み込むと、ボタンと「ボタンをクリックするとこのテキストが変わります」というテキストが表示されます。

ボタンをクリックすると、ウェブページが変わり、新しいテキスト: <フィギュアクラス= "WP-画像圏">  SES9UW5H18rpOrMBgZl2G0rKN LrvhzufnH5bMpX7pd yKpLocGpIBvv9FgaeNxPpoFbLQuJKYqi4cIrWOAGWYrOnN96AJ655kefwbfkk1gCClwg P9I9fQ9G8EQnDUzJw < /図>

概要

一般に、Webでイベントを実行できるようにするコードは、クリックしてページをクリックします。

これそれは...ですか!上記のコードを使用して、ボタンを押したときにコードを実行するWebページを正常に作成しました。上記のコードはテキストを変更するだけですが、必要に応じて複雑または単純にすることができます。

ユーザーがボタンをクリックしたときに通知を受け取る場合は、alert()関数を使用できます。 JavaScriptで。コードに「if」宣言を追加する場合は、

JavaScriptを学習するためのその他のリソースについては、 JavaScriptラーニングガイド