数値計算したいのに文字列連結されてしまう。

質問

数値計算したいのに文字列連結されてしまう。

交通費の合計値を計算するhtmlページを作成しております。
テキストボックスの値が変更された時に動くJavaScriptを作成しております。
html側には name="cost1" ～ name="cost10" までのタグがあ、
どのテキストボックスが変更されても合計計算のJavaScriptが呼ばれます。

下記のようなソースを書いておりまして、
cost1~cost10までの合計値をcost_sum.valueに代入したいと思っています。
しかし下記※印部で文字列連結がされてしまいます。
過去の類似質問等検索しまして、
直前に-0を入れて数値計算として扱わせる事や、
parseInt(costsum);
を直前に入れるなど試みたのですが上手く行きません。

htmlとJavaScriptを扱い始めて日が浅く、
基本的なことを聞いてしまっているとは思いますがよろしくお願いします。

【test.html】
<input type="text" value="100" name="cost_1" id="cost_1" size="5" OnChange="sum_calculate();">
…（中略）…
<input type="text" value="2000" name="cost_2" id="cost_2" size="5" OnChange="sum_calculate();">
<!-- 合計値をcost_sum.valueに入れる --!>
<input type="text" value="" style="background-color:#D4D0C8" readonly="readonly" name="cost_sum" id="cost_sum" size="5">

【test.ja】
function sum_calculate()
{
　n = 1;
　costsum = 0;

　while(n <= 10 ) {
　　alert(n + "週目");
　　va = "cost_" + n;
　　va = document.getElementById(va).value;
　　alert(va);

　　costsum = costsum - 0 + va ;
　　//※文字列連結されてしまう
　　alert(costsum);

　　n = n + 1;
　　}
　　this.cost_sum.value = costsum;　
}

回答No.1

notnot · ベストアンサー

+演算子は少なくとも一方が文字列なら、連結になります。ここでは、va が文字列なので、左項が数値でも、文字列の連結を行います。- だと必ず数値演算です。

好みで、どれでも。
costsum = costsum + parseInt(va)
costsum = costsum - (-va)
costsum = costsum + (va-0)

あるいはシンプルに。
costsum -= -va

お礼

早速の回答ありがとうございます。

最後の計算によって文字列、数値切り替わるのではなく、
どちらか一方が文字列だったら文字列になるのですね。
おかげさまで解決しました。ありがとうございました。