イベント
クリックに応じて JavaScript を実行する
これまで、JavaScript は HTML が読み込まれたタイミングで実行されていました。
ここでは、ボタンがクリックされたり、フォームへの入力が行われたり、ページが読み込まれたりといった何らかのアクションに応じて JavaScript で処理を行う方法を学びます。
例として、ボタンがクリックされたときに こんにちは、世界！ と表示するようなプログラムを作成してみましょう。
まず、クリックするためのボタンを用意し、id 属性をつけておきます。
ボタンは button 要素を使って表します。
<button id="greet-button" type="button">クリック</button>
次に、ボタンがクリックされたときに実行される JavaScript のプログラムを書いていきます。
function greet() {
document.write("こんにちは、世界！");
}
document.getElementById("greet-button").onclick = greet;
-
function greet() { ... }の部分では、ボタンがクリックされたときに実行される関数を定義しています。 -
document.getElementById("greet-button")の部分では、先ほどの DOM のセクションと同様に、id属性がgreet-buttonである HTML 要素を取得しています。 -
.onclickと書くことで、要素がクリックされたときに実行される関数にアクセスできます。ここでは、最初の部分で定義したgreet関数を指定しています。
最終行で greet() ではなく greet となっていることに注意してください。
もし greet() と書くとこの行が実行されるときに関数が呼び出されてしまいます。ここではあくまで関数を指定したいだけなので、greet と書いています。
ボタンのクリック、フォームへの入力、ページの読み込みなど、Web ページ上で発生するあらゆるアクションを総称してイベントと呼びます。
演習問題
次のような通販サイトがあります。最初は、下のボタンから注文できます。 というメッセージが表示されています。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>通販サイト</title>
</head>
<body>
<p id="order-message">下のボタンから注文できます。</p>
<button id="order-button" type="button">注文する</button>
</body>
</html>
注文する ボタンを押すとメッセージが 注文済です。 に変わるようにしてください。
function order() {
// ボタンがクリックされたときの処理を書く
}
document.getElementById(/* ボタンのid名 */).onclick = order;
解答例: 通販サイト
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>通販サイト</title>
</head>
<body>
<p id="order-message">下のボタンから注文できます。</p>
<button id="order-button" type="button">注文する</button>
</body>
</html>
function order() {
document.getElementById("order-message").textContent = "注文済です。";
}
document.getElementById("order-button").onclick = order;