getElementsByNameで取得した値の合計を計算するにはどうしたらいいか

Question

javascriptにおけるsetKTotal()内の
total1[0].value = parseInt(ksubtotal[0].value, 10) + parseInt(ksubtotal[1].value, 10) + parseInt(ksubtotal[2].value, 10) + parseInt(ksubtotal[3].value, 10) + parseInt(ksubtotal[4].value, 10);
をより簡略にし、合計を出すにはどうしたらいいでしょうか？

ループなどを用いた具体的なコードを教えていただけるとありがたいです。

var kprice = document.getElementsByName('k-price');
var ksubtotal = document.getElementsByName('k-subtotal');
var way = document.getElementsByName('way');
var total1 = document.getElementsByName('total1');

function setKTotal() {
    "use strict";
    total1[0].value = parseInt(ksubtotal[0].value, 10) + parseInt(ksubtotal[1].value, 10) + parseInt(ksubtotal[2].value, 10) + parseInt(ksubtotal[3].value, 10) + parseInt(ksubtotal[4].value, 10);
}
function setKSubTotal() {
    "use strict";
    var i;
    for (i = 0; i < 5; i++) {
        ksubtotal[i].value = kprice[i].value * way[i].value;
        setKTotal();
    }
}

<tr class="line2">
<td>
                        <select name="transportation">
                            <option value="ku"></option>
                            <option value="chika">地下鉄</option>
                            <option value="zairai">JR在来線</option>
                            <option value="shinkan">JR新幹線</option>
                            <option value="hankyu">阪急</option>
                            <option value="keihan">京阪</option>
                        </select>
                    </td>
                    <td><input type="text" name="k-price" onchange="setKSubTotal()"></td>
                    <td>
                        <select name="way" onchange="setKSubTotal()">
                            <option value="1">片道</option>
                            <option value="2">往復</option>
                        </select>
                    </td>
                    <td><input type="text" name="k-subtotal" readonly="readonly"></td>
</tr>
<tr class="line1">
                    <td></td>
                    <td></td>
                    <td class="goke">合計</td>
                    <td><input type="text" name="total1" readonly="readonly"></td>
</tr>

Comments

[x_x]

提示コード内にすでにforがあるのでループはわかっていると思うのですが、どこでわからなくなっているでしょうか？

Answer 1

    var temp = 0;
    for (var i = 0; i < 5; i++) {
        temp += parseInt(ksubtotal[i].value, 10);
    }
    total1[0].value = temp;

みたいな感じではどうですか？

Comments

[syoma]

結果NaNで返されます。

[Lhankor_Mhy]

「実はk-subtotalが6個なかった」みたいな原因がありえそうですね。

[Lhankor_Mhy]

あ、5個か。

[Lhankor_Mhy]

当方の環境では問題なく動作しました。ここに書かれていないコードが原因か、または環境の問題かもしれません。

[syoma]

htmlでinput-textから入力された値をk-priceというnameで取得して
その後、セレクトボックスで選択された数字の値に対する数字のvalueと掛け合わせたものを
k-subtotalというnameのテキストボックスに代入しているので
無いことはないかと思うんですが、、、

[Lhankor_Mhy]

k-subtotalは5個あって、それぞれに数値が表示されているということですね？
了解です。

当方の環境では問題なく動作しましたので、ここに書かれていないコードが原因かな、という気がしてます。

[syoma]

ご回答ありがとうございます。
初期値の問題で正常な結果が出ませんでした。
問題解決しました。
ありがとうございました。

[Lhankor_Mhy]

え、それで動くんですね。興味深いな。

Answer 2

こういう感じでしょうか？

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var num=Array.prototype.map.call(document.querySelectorAll('[name="k-subtotal"]'),function(x){
    return parseInt(x.value)||0; /*一部エラー回避処理を追記*/
  }).reduce(function(x,y) {
    return x+y;
  });
  console.log(num);
});
</script>
<input type="text" name="k-subtotal" value="100">
<input type="text" name="k-subtotal" value="150">
<input type="text" name="k-subtotal" value="200">

※わかりやすくするためソースを結合

Comments

[syoma]

試してみましたが、結果がうまくでません

[yambejp]

わかりやすくするために結合しておきました
上記コピペでhtmlを書いてもエラーがでますか？

[yambejp]

ちなみに「うまくでません」だと状況がわかりません
OS、ブラウザの種類とバージョンを提示して
どううまくいかないのか、エラー？なにも出ない？を
書いたほうが良いと想います

[syoma]

すいません
NaNと表示されます。

[yambejp]

> NaNと表示されます。

return parseInt(x.value)||0;

にしてみてください

[syoma]

０とかえされました。

[yambejp]

再度確認になりますが
わたしの書いたソースだけをHTMLにコピペして確認して
0と表示されるのですね？
（ご自身のソースに当てはめるのではなく）

それと結局動作環境は提示いただけないのでしょうか？

[syoma]

ご回答ありがとうございました。
初期値の問題でした。
ありがとうございました。

Answer 3

たとえば、

total1[0].value = 0;
for(var i = 0; i < ksubtotal.length; i++){
  total1[0].value+=parseInt(ksubtotal[i].value, 10);
}

…とかやりたい、ということですか？

以下追記：
下記の修正ソースではどうでしょう？

var sum = 0;
for(var i = 0; i < ksubtotal.length; i++){
  sum += parseInt(ksubtotal[i].value, 10);
}
total1[0].value = sum;

Comments

[syoma]

解答ありがとうございます。

おっしゃるたおりですが
そのコードで実行すると
たとえばノードリスト内の値が
100,1,2,3,4だとすると
結果は110ではなく
1001234となってしまうので
困っております。

[tkturbo]

最初の「total1[0].value = 0」はちゃんといれてますか？＞syomaさん

[syoma]

いれております。

[syoma]

total1[0].value = 0という記述ではなく、total1.value = 0で初期値を入れていました。
申し訳ございません。
訂正し、正常に動作しました。

Answer 4

document.addEventListener('change', function(event) {
  var sum = 0;
  var line2 = document.querySelectorAll('tr.line2');
  for (var i = 0; i < line2.length; i++) {
    var element = line2[i];
    var subtotal = (parseFloat(element.querySelector('[name="k-price"]').value) || 0) * parseInt(element.querySelector('[name="way"]').value, 10);
    element.querySelector('[name="k-subtotal"]').value = subtotal.toString();
    sum += subtotal;
  }

  document.querySelector('[name="total1"]').value = sum.toString();
}, false);