jQueryを使っての自動計算で、文字列同士の足し算を解決したい

Question

jQueryを利用しての自動計算での質問があります。

<div class="fare">
  <input type="number" name="fare" placeholder="交通費を入力してください 　　  (円)" id="travelCost1" class='txtCal'><br>
</div>

<div class="hotelName">	
  <input type="text" name="hotelName" placeholder="ホテル名を入力してください" id="travelCost2" class='txtCal'><br>
</div>

<div class="hotelFee">
   <input type="number" name="hotelFee" placeholder="ホテル代を入力してください　   (円)" id="travelCost3" class='txtCal'><br>
</div>

<div class="mealFee">
   <input type="number" name="mealFee" placeholder="食事代を入力してください　　   (円)" id="travelCost4" class='txtCal'><br>
</div>

<div class="otherAmount">
   <input type="number" name="otherAmount" placeholder="その他費用を入力してください　(円)" id="travelCost5" class='txtCal'><br>
</div>

<div class="totalFee">
   <input type="hidden" name="totalFee"> 合計金額 : <span id="travelCost6" class="total_sum_value"></span>円<br>
</div>

<script>
$(function() {
	calc_price();
	$("#travelCost1").change(function(){
		calc_price();
	});
	$("#travelCost3").change(function(){
		calc_price();
	});
	$("#travelCost4").change(function(){
		calc_price();
	});
	$("#travelCost5").change(function(){
		calc_price();
	});
	
	function calc_price(){
		var t1 = parseInt($("#travelCost1").val());
		var t3 = parseInt($("#travelCost3").val());
		var t4 = parseInt($("#travelCost4").val());
		var t5 = parseInt($("#travelCost5").val());
		var total = t1 + t3  + t4 + t5;
		$("#travelCost6").text(total.toLocaleString());
	};
});
</script>

このような形で書いたのですが、入力したものが文字列として認識され、
文字列同士の足し算になってしまいます。
解決策をお願いいたします。

Comments

[kei344]

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在回答されておられる方の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。

[tennis]

わかりました。ご指摘ありがとうございます。

Answer 1

こんにちは

以下は、ご質問に挙げられているHTMLとJSをそのままCodePenに転記したものです。

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/YzPJgmN?editors=0010

上記では、４つの <input type="number"> のいずれも数字が入力されていれば、合計金額が表示されますが、初期表示含めひとつでも空欄があるときは、合計金額に NaN と表示されてしまいます。これを、取り急ぎの応急措置で修正するには、以下のように || 0 を追加することが考えられます。 こうすると、parseInt した結果が NaN になったt1〜t4に整数値の 0 が入るようになります。

var t1 = parseInt($("#travelCost1").val()) || 0;
var t3 = parseInt($("#travelCost3").val()) || 0;
var t4 = parseInt($("#travelCost4").val()) || 0;
var t5 = parseInt($("#travelCost5").val()) || 0;

以下は、上記の修正を動作確認するものです。

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/eYmPoOw?editors=0010

最後にリファクタ案を挙げておきます。

$(function() {
    calc_price();
    $("input[type=number]").change(calc_price);

    function calc_price(){
        var total = [...$("input[type=number]")].reduce((sum, input) => sum + (+input.value), 0);
        $("#travelCost6").text(total.toLocaleString());
    };
});

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/mdyzgdM?editors=0010

上記は以下の諸点で、ご質問にあるコードをリファクタしたものです。

• changeハンドラを設定するところで、対象のセレクタを input[type=number] に修正して１行で済むようにした。
• 合計の算出時に、 $("input[type=number]") をスプレッド構文で配列にした後、reduceを使用
• 合計を算出時に、数字の文字列を数値に変換する際、単項加算（unary plus)を使用

以上、参考になれば幸いです。

Comments

[tennis]

できました！ありがとうございます！！

[jun68ykt]

どういたしまして。
> できました！
とのことで、よかったです????

[tennis]

すいません、このこととは全く関係ないのですが、一番最後に出した合計金額をinput type="hidden" name="totalFee"で飛ばし、DBに登録したいのですが、nullになってしまって…この書き方だと飛ばないんですかね？

[jun68ykt]

> ・・・で飛ばし、

ということだと、合計金額の算出後に、total を span#travelCost6 に text()　で表示用に設定するだけではなく、以下のようにして、フォーム項目への反映も必要ですね。

$('input[name=totalFee]').val(total);

[tennis]

すごい！できました！本当にありがとうございます！

[jun68ykt]

????

Answer 2

parseInt() を使わずに、Number() を使うか、0で減算するといけるかな？

var t1 = Number($("#travelCost1").val());

var t1 = $("#travelCost1").val() - 0;

Comments

[tennis]

Numberのパターンと−０のパターン、試してみたのですが動きませんでした・・・でも勉強になりました！ありがとうございます！

Answer 3

プログラムは基本的に一番内側から処理が行われますので、
文字列を結合した結果をパースしても意味はありません。
先に個々にパースしてから足し算しましょう。

Comments

[tennis]

ありがとうございます。個々にパースもしてみたのですが、その場合Nanとなってしまいます。

[m.ts10806]

コード提示されないとなんとも。

[m.ts10806]

あぁ質問のコード変更されたんですね。
回答によってかえられたのならその旨書かれないと・・・

[m.ts10806]

ちなみに空文字などはNaNになります。
console.log(parseInt(""));
https://paiza.io/projects/flzA9TFRr8Ed8Rl45hTRkQ

NaNに何を足し込んでもNaNなのでそうなるのではと。
今の作りだと全てに数値とみなせるものが入力されてないとNaNになると思います。

[m.ts10806]

個々に同じ処理をするchangeイベント付与されると若干コード的には冗長になるので、
input['type=number']でまとめたほうが良いかなとも思います。

[tennis]

全てに数値を入力したらNaNじゃなくなりました！ありがとうございます！
ただ実現したいこととしては、travelCost1,3,4,5にそれぞれ値が入った時点で
合計金額を出したいのですが、その場合はどういった作りにすればいいのでしょうか。

初心者ですみません、input['type=number']はどこにどのように書けばいいのでしょうか。

[m.ts10806]

> travelCost1,3,4,5にそれぞれ値が入った時点で
合計金額を出したいのですが、その場合はどういった作りにすればいいのでしょうか。

一気に足し込むのではなく初期値０の変数から個々に足し込んでいき、空の場合は足し込まないようにすると良いと思います。

>input['type=number']

これもセレクタなので現在と概念は同じです。
https://qiita.com/Thought_Nibbler/items/5d4fc40a4d4325128b24

あと今気づいたんですが、
JavaとJavaScriptは別物なので、タグは修正しておいてください。

[退会済みユーザー]

>input['type=number']でまとめたほうが良いかなとも思います。

そういう事すっと、将来破綻すっぞ。

適切にクラス分けしとけよ…。

[m.ts10806]

ケースバイケース。

[退会済みユーザー]

なわけねぇだろ。

ほんとに仕事してんのか？　おめぇ。

[m.ts10806]

前から言ってますがあなたの反応はもう結構です。

[退会済みユーザー]

おめぇの願望に拘束力なんかねぇって、おめぇ自信が何度も質問者に言ってる事だろｗ

type=numberでロジック組むって、
後から別のtype=numberなinputフィールド追加される可能性
全く考えてねぇだろ、おめぇ。

[退会済みユーザー]

「前から言ってますが」っていったらさ、

m.ts10806はまえから何度もおかしな事言っておらに突っ込まれてるけど、
絶対に自分の間違い認めねぇよな。

そういう所がおめぇの一番カッコ悪ぃところだと思うぞ。

[退会済みユーザー]

あとさ、すげぇ不思議なのが、質問者がparseInt()を使ったときに、「基数を指定してください」って言わねぇのな、m.ts10806って奴。

ほんと、大丈夫か？って思った。

[退会済みユーザー]

他の細けぇことはぐちぐちぐちぐち指摘するくせに、JSのparseInt()で基数については何も言わねぇとか、ちょっと、おら、考えられねぇぞ。