javascriptで簡単な計算シュミレーションを作る

javascriptを使うことでページに動きをつけたりアプリを作ったり計算をしたりさまざまなことができます。

今回はjavascriptで簡単な計算シュミレーションを作ってみたいと思います。

計算シュミレーションの作り方

html

計算結果を表示させるための要素と実際に商品の価格と数量を入力するためのフォームを作ります。

<div id="result"></div>
<form>
	<label>商品価格: <input type="text" id="price"></label>
	<label>数量: <input type="text" id="quantity"></label>
	<button type="button" onclick="calculate()">計算するためのボタン</button>
</form>

商品価格と数量に数字を入れるてbuttonタグを押すことで商品価格の合計を表示させます。

javascript

function calculate() {
  //フォームに入力された値を取得する
  var price = document.getElementById("price").value;
  var quantity = document.getElementById("quantity").value;
 
  //価格と数量の計算
  var total = price * quantity;
 
  //計算結果を表示する
  document.getElementById("result").innerHTML = "商品価格の合計は" + total + "円です。";
}

サンプル