複数のinputに入力された数値の合計を出したい。

Question

画像のように複数のinputに入力された数値を「開始」ボタンを押すと合計が求められる仕組みをjQueryで作りたいです。
合計はとりあえずconsole.logで表示されれば大丈夫です。
初学者なので至らぬ点がありますがよろしくお願いします。

<table id="member_list" class="table">
  <tbody>
    <tr class="row">
      <th class="col-6 px-5">名前</th>
      <th class="col-6 px-5">金額</th>
    </tr>
    <tr class="row">
      <td class="col-6 px-5">たなか</td>
      <td class="col-6 px-5"><input class="en rounded border" type="number" name="price"> 円</td>
    </tr>
    <tr class="row">
      <td class="col-6 px-5">たなか</td>
      <td class="col-6 px-5"><input class="en rounded border" type="number" name="price"> 円</td>
    </tr>
     <tr class="row">
      <td class="col-6 px-5">たなか</td>
      <td class="col-6 px-5"><input class="en rounded border" type="number" name="price"> 円</td>
     </tr>
  </tbody>
</table>
<div class="row text-center">
  <button id="begin" type="button" class="btn btn-secondary btn-lg col-8 mx-auto">開始</button>
</div>

下記コードで試したが、sum = sum + num.value[i];の行で
Uncaught TypeError: Assignment to constant variable.
とエラー。

  $("#begin").on("click", function(){
    //メンバーの金額を取得して合計する
    $(".en").each(function(index, num){
      $('.en').last().attr("id", "last");
      const elm = $("#last");
      const last = $(".en").index(elm);
      const sum = 0;
      for(let i = 0; i<=last+1; i++){
        console.log(num[1]);
        sum = sum + num.value[i];
        console.log(sum);
      };
    });
  });
}());

Comments

[m.ts10806]

JavaScriptのコードの前半が足りてないと思います。
別のエラーが出てそもそも実行できません。

Answer 1

既に出ている回答がシンプルで良いと思いますが、
ひとまず今の構成から要点を指摘しておきます。

  $("#begin").on("click", function(){
    $(".en").each(function(index, num){ //eachだから全部回してます
      $('.en').last().attr("id", "last");
      const elm = $("#last");
      const last = $(".en").index(elm);
      const sum = 0; //全部回してるので毎回初期化される
      for(let i = 0; i<=last+1; i++){
        console.log(num[1]);
//undefinedになる
        sum = sum + num.value[i];
//valueはそもそも配列ではないのでやるならnum[i].value []のつけどころ間違い 
//でもundefinedだからvalueは持ってない なぜならnum自体が1つの要素だから
        console.log(sum);
      };
    });
  });

ということで、eachでするか、forでするか、どちらかにしましょう。
eachは要素をループするものです。
forも繰り返し処理をするものです。

今回の場合は重ねる要件にはならないと思います。
もっと階層の深い構成になっていれば別ですが、1つしかないですからね。

あと$(".en").index(elm);の結果は「２」になるはずです。
ということはforの条件式であるlet i = 0; i<=last+1;は「０から３まで」回すことになります。ループ回数は４回ですね。
要素が複数ある場合、最初は０から始まり、今回入力する要素.enが振られているのは３つしかないので、途中でindex参照のエラーが出ると思います。

---

以上の点を踏まえ、調整してみてください。

Comments

[hase_]

コメントありがとうございます。
ご指摘いただいたところは私自身書き方が合っているのか不安だった箇所なので、おかげさまで不安を解消することができました。
また機会があればよろしくお願いします！

Answer 2

こんにちは

一案としまして、以下のようにすると合計を得ることができます。

const sum = $(".en").get().reduce((s, e) => +e.value + s, 0);

• **動作確認用サンプル： **https://codepen.io/jun68ykt/pen/vYNmBGw?editors=1011

Comments

[m.ts10806]

なんじゃろかこの低評価。

[jun68ykt]

> 低評価

につきましては、回答に提示したコードに対するもの、というよりは、私の総合的な人格あるいは人徳、人間力といったモロモロの至らない点について厳しくも愛あるお叱りを頂戴したと認識しておりまして、低評価をお届けくださった方には感謝の念に堪えません。さらなる研鑽に励んでまいる所存でございます。

[m.ts10806]

私以上に厳しめにやってる人ってそう多くないと思うので、そこまで私怨らしきものを受けるような人には見えません。
コード書くのが本当に好きなんだろうなぁ、書き方参考になるなぁと思いながら見てます。私は。

[jun68ykt]

ありがとうございます！
m.ts10806さんにそうおっしゃって頂けるとは、大変うれしいです。(^^)

[hase_]

コメントありがとうございます！
おかげさまで動作が確認できました！
ご親切にわかりやすいURLも記載していただきありがとうございます。

[jun68ykt]

@hase_さん
どういたしまして????
> おかげさまで動作が確認できました！
とのことでよかったです????