JavaScript Onclick：ステップバイステップガイド

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

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

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

この短いガイドでは、onclick関数がどのように機能するかを説明します。コードでonclickを使用して、ウェブサイトをインタラクティブにする方法について説明します。

イベントリフレッシャー

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

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

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

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

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

イベントリスナーは、ボタンなどの要素の一部であり、操作するまで「リッスン」して待機します。次に、リスナーはイベントハンドラーを実行します。

JavaScript onclick

JavaScriptのonclickイベントは、ボタンまたは別のWeb要素をクリックすると関数を実行します。たとえば、onclickイベントは、ボタンをオンにしたときにダイアログボックスを表示するようにトリガーできます。

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

&lt;button onclick="codetorun"&gt;Click me&lt;/button&gt;

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

プレーンJavaScriptでonclickを使用することもできます。 JavaScriptのonclickメソッドの例を次に示します。

var item = document.getElementById("button");
item.onclick = function() {
	codetoexecute...
}

JavaScriptのgetElementByIdメソッドを使用して、Webページから要素を取得します。 ID「ボタン」の要素をクリックすると、onclick関数が実行されます。

ボタンonclickJavaScriptの例

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

index.html

<!DOCTYPE html>
<html>

<head>
	<title>onclick example</title>
</head>
<!-- Main body of code -->
<body>
	<button>Click here.</button>

	<p>This text will change when you click the button.</p>
</body>

<!-- Reference our JavaScript event code -->
<script src=”js/onclick.js”></script>

</html>

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

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

index.html

...
<body>
	<button onclick=”changeParagraph()”>Click here.</button>

	<p>This text will change when you click the button.</p>
</body>
…

changeParagraph（）イベントのコードを保持する「onclick.js」ファイルを作成しましょう。このイベントは、段落のテキスト（「p」要素）を別のものに変更します。

onclick.js

const changeParagraph = () => {
	const paragraph = document.querySelector(“p”);
	paragraph.textContent = “This text has changed because you clicked the button.”
}

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

ボタンをクリックすると、Webページが変更され、新しいテキストが表示されます。

概要

全体として、onclick（）はJavaScriptイベントの一種であり、Webページ上の要素がクリックされたときに特定のコードを実行できるようにします。

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

ユーザーがボタンをクリックしたときにアラートを受け取るようにする場合は、JavaScriptのalert（）関数を使用できます。コードに「if」ステートメントを追加する場合は、それも実行できます。

JavaScriptの学習リソースの詳細については、JavaScriptの学習方法ガイドをご覧ください。

jQuery find（）：ステップバイステップガイド

JavaScript ParseInt：ステップバイステップガイド

JavaScript関数の使用方法：ステップバイステップガイド
JavaScript関数は、再利用できるコードのカスタムブロックです。関数を使用すると、コードをよりモジュール化でき、オブジェクト指向プログラミングに不可欠です。関数は、宣言または式を介して定義できます。 JavaScriptを学び、基本を知りたい場合、JS関数は間違いなく知っておく必要のあるものです。プログラミング言語での作業に時間を費やしたことがあれば、関数が複雑なプログラムの構成要素であることはご存知でしょうが、それらがどのように機能するかわからない場合があります。関数を使用すると、コードを複数回繰り返すのではなく、一般的なプロセスに対して1回だけコードを記述できます。関
onclick（）で関数を呼び出す– JavaScript？
次がボタンだとしましょう- <button onclick="displayingMessageOnButtonClick()">Press Me</button> 上記のボタンをクリックするだけで関数を呼び出す必要があります。例以下はコードです- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&q