JavaScriptを使ってセレクトボックスが変わる度に計算を反映させるコード。

JavaScript皆さん使っていますかー。

JavaScript使えるようになっておくと、サイトで計算式をリアルタイムで出来るようにしたり、折りたたみができるようになったり、メッセージを表示させられるようになったりと出来る幅が増える言語です。

今回はJavaScriptでも、ニーズがありそうな計算をページ移動させることなくさせて表示できるコードをシェアします。

• JavaScriptを使ってリアルタイムで変わる計算式とは？
• 計算式に使うJavaScript,HTMLのコード
• セレクトボックスで変わらなかった時用の再計算ボタン。

JavaScriptを使ってリアルタイムで変わる計算式とは？

数字を入れて、計算ボタンを押して次の画面で計算結果を出すというのはPHPとかで簡単に出来ます。
その簡単さをリアルタイムで変わる計算表示にしてしまい、わざわざ次の画面に飛ばすことなく表示させようというものです。

百聞は一見にしかずですので、まずは下記計算をいじくってみてください。


円の
8
10
％の時の消費税は
合計で円です。





数字を入れた後に、消費税の項目を変えれば合計額が変わるのがわかるかと思います。

計算式に使うJavaScript,HTMLのコード

続いて、この計算式を出すためのコードがこちらです。


HTML側のコード

円の


8

10

％の時の消費税は

合計で
円です。

JavaScript側のコード

HTMLはわかるけど、JavaScriptはわからないよー！でもこの計算式を使いたいという方はtax_1とtax_2の内容を変えてあげてidでtotalを設置すれば同様のものが表示されます。

構成としてはすごい簡単で、

$("select#tax_2_id").change(function(){

セレクトボックスの値が変わったら

var tax_1= $('[name=tax_1]').val();

var tax_2= $('[name=tax_2]').val();

var result = tax_1 * tax_2; 

$("#total").html(Math.ceil(result));

の内容が計算されて、最後にtotalのIDの所へHTMLで追加されるといったもの。
CSSのセレクタがわかる人は、HTMLに計算内容を追加するんだーということがイメージしやすいかとおもいます。

セレクトボックスで変わらなかった時用の再計算ボタン。

ただ上の内容だと、セレクトボックスをいちいち変えなければいけません。また金額の方に入れても動作しない。
そんなときは計算ボタンをつけておくと、より親切です。




円の
8
10
％の時の消費税は
合計で円です。



JavaScriptをちょっとでもかじっておくと「あれ、これできるかも。」という幅が増えるので参考書でも一冊読んでおくことをおすすめします。

最新投稿された記事はいかがですか？

• 南野どうなる?2015年冬から4大リーグにいったザルツブルクの選手をリストアップ！
• 毎日25分のオンライン中国語レッスンサイトまとめ。結構サイトによって金額と時間が違ってます。
• 中国語で覚えておきたい接続詞まとめ。
• [サッカーまとめ]2007-2016に欧州のクラブチームに移籍して日本人選手リスト。