Webアプリケーションにおいて、ユーザーからの入力に基づいて簡単な数値計算を行うケースは非常に多いです。例えば、ショッピングサイトでの合計金額の計算や、ユーザーが入力したデータに基づくグラフの生成などがあります。今回は、JavaScriptを使用してHTMLの<input>要素に入力された数値の計算結果を表示する基本的な方法について解説します。
HTMLの準備
まず最初に、数値を入力するためのHTMLの<input>要素を作成します。この例では、2つの数値を加算する簡単なプログラムを作成するため、2つの<input>要素と、計算結果を表示する<div>要素を用意します。
<!DOCTYPE html>
<html>
<head>
<title>数値計算</title>
</head>
<body>
<input type="number" id="number1" placeholder="数値1">
<input type="number" id="number2" placeholder="数値2">
<button onclick="calculate()">計算</button>
<div id="result"></div>
</body>
</html>JavaScriptでの計算処理
次に、JavaScriptを使用して数値の計算と結果の表示を行います。以下のコードスニペットは、2つの数値を加算して結果を表示する簡単な例です。
function calculate() {
// 入力された数値を取得
const number1 = parseFloat(document.getElementById("number1").value);
const number2 = parseFloat(document.getElementById("number2").value);
// 計算（例：加算）
const result = number1 + number2;
// 結果を表示
document.getElementById("result").innerText = "結果: " + result;
}このコードでは、parseFloat関数を使用して<input>要素から取得した文字列を浮動小数点数に変換しています。その後、加算を行い、結果を<div>要素に表示しています。
完全なコード例
最後に、HTMLとJavaScriptを組み合わせた完全なコード例を以下に示します。
<!DOCTYPE html>
<html>
<head>
<title>数値計算</title>
<script>
function calculate() {
// 入力された数値を取得
const number1 = parseFloat(document.getElementById("number1").value);
const number2 = parseFloat(document.getElementById("number2").value);
// 計算（例：加算）
const result = number1 + number2;
// 結果を表示
document.getElementById("result").innerText = "結果: " + result;
}
</script>
</head>
<body>
<input type="number" id="number1" placeholder="数値1">
<input type="number" id="number2" placeholder="数値2">
<button onclick="calculate()">計算</button>
<div id="result"></div>
</body>
</html>
まとめ
この記事では、JavaScriptとHTMLを使用して簡単な数値計算を行う方法について解説しました。この基本的なフレームワークを理解することで、より複雑な計算やデータ処理も容易に拡張できるでしょう。JavaScriptは非常に柔軟な言語であり、多くのWebアプリケーションで広く使用されています。この知識を基に、さまざまな用途での数値計算を楽しんでください。
