JavaScriptは元々、Webページをインタラクティブにしたり、HTMLだけでは実現できないような動的なページをつくれるようにすることを目的に開発されました。
そのため、HTMLで記述された要素に対して、値を取得したり、設定したりといった操作も簡単に行うことができます。
今日のレッスンでは、2つの入力フォームから数値を取得し、足した結果を別の入力フォームに設定する例を取り上げます。いつもの通り、以下をテキストエディタで入力してください。
リスト6: lesson06.html
<!DOCTYPE html>
<html>
<head>
<title>Lesson06</title>
</head>
<body>
<input id="A" type="number" value="0" min="0" max="99" oninput="calc()" />
+
<input id="B" type="number" value="0" min="0" max="99" oninput="calc()" />
=
<input id="C" type="number" value="0" readonly />
<script>
function calc() {
let a = document.getElementById("A").value;
let b = document.getElementById("B").value;
try {
let sum = parseInt(a) + parseInt(b);
document.getElementById("C").value = sum;
} catch (e) {
document.getElementById("C").value = "";
}
}
</script>
</body>
</html>保存したファイルをWebブラウザで開くと、3つの入力フォームが表示されます。
1つ目と2つ目の入力フォームに数値を入力すると、たし算の結果が表示されます。
<input>要素はHTMLの入力フォームです。ここに指定しているid属性はHTMLファイル内で一意の識別子で、任意のHTML要素に付与できます。
id属性を指定することで、JavaScriptから、document.getElementById(“識別子”)という命令で要素オブジェクトを取得することができます。
oninput属性には、フォームに値が入力されるたびに、<script>内で定義したしたcalc()関数を呼び出す指定をしています。
calc関数は、取得した<input>要素のvalue属性から、入力された文字列を取得して、それを数値として扱ってたし算を行い、その結果を3つめの<input>要素のvalue属性に設定しています。
入力された文字列が数値以外の場合、parseInt()で例外が発生するため、その場合は、結果は空欄にしています。