jQueryのお勉強(消費税計算ツール)

JavaScript

こんにちは。トミーです。

最近はjQueryを書く機会が減り、Excelの関数ばかり書いてます(笑)

と言うことで、定期的な復習も兼ねてjQueryの基本コードを使った「消費税計算ツール」を作ってみました。

消費税ツール

デモ:消費税計算ツール

コード内容

HTML

<p><input type="number" id="〇〇〇">円</p>
<button id="△△△">計算する</button>
<p>計算結果<span id="□□□">0</span>円</p>

jQuery

$(function(){
 $('#△△△').click(function(){
   var calc = $('#〇〇〇').val();
   var result = calc * 1.1;
   result = Math.round(result);
   $('#□□□').html(result);
 });
});

※HTML/jQueryの中にある〇〇〇、△△△、□□□については、同じマークのものに同じid名を英数字でつけてください。
※CSSについては割愛しています。

jQueryのコード説明

jQueryのコードについて、簡単に説明すると下記のことが書いてあります。

  1. 入力した値の取得
  2. 計算(四則演算)
  3. 四捨五入の処理
  4. HTMLに表示

「2.計算(四則演算)」の部分を変更することで、足し算や引き算をはじめ、割引計算などの応用が可能です。

jQueryの詳細説明

jQueryは基本的に下記の中に処理を書きます。

$(function(){
//ここに処理を書きます
});

id名「△△△」がクリックされた時に行う処理を書きます。

$('#△△△').click(function(){
//クリックされた時の処理を書きます
});

1.入力した値の取得

var calc = $('#〇〇〇').val();

id名「〇〇〇」内にある値を「.val()」で取得します。

2.計算(四則演算)

 var result = calc * 1.1;

先程取得した値を基に計算します。
今回の場合は、消費税10%を計算したいので「取得した値×1.1」と入力しています。
ここの計算式を変更するとあらゆる計算が可能になります。

3.四捨五入の処理

 result = Math.round(result);  

先程の計算結果の値を四捨五入します。
四捨五入以外にも切り捨て(Math.floor)、切り上げ(Math.ceil)の計算も可能です。
(不要であればコードを削除して構いません。)

4.HTMLに表示

$('#□□□').html(result);

id名「#□□□」がある所に計算結果をHTMLとして返します。

補足

HTML内に記載している「id」を起点にして行われている処理になるため、状況に応じてHTMLのタグは変えていただいて構いません。

idの名前については、他のid名と重複しないように十分気をつけてお使いください。

jQueryの読み込み

jQueryを動かすためには、jQueryのファイルを事前に読み込んでおく必要があります。
ヘッダー等に下記を記述しておきましょう!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

※jQueryのバージョンは最新のものを使うようにしてください

まとめ

コードの内容を理解できれば、jQueryも意外と簡単ですね!

四則演算の部分を変更すれば可能性は無限大!

みなさんもいろんなツール作成にチャレンジしてみてください♪

タイトルとURLをコピーしました