複数商品購入の自動計算の実装

Question

前提

ruby on railsで商品発注システムを作成しており、現在は商品購入画面の実装を行なっています。
複数の商品を同時購入できる事を理想としています。商品購入画面で表示される商品はユーザーがお気に入りした商品のみが表示される様に限定しております。

下記が現在の実装のスクショとなります。

実現したいこと

・商品毎の数量の欄に注文数量を入力すると、商品価格x数量が小計に自動表示されること。

・全ての小計の合計が合計の欄に表示されること。

上記の二つを現在の目標としております。

発生している問題・エラーメッセージ

問題
「商品の数量を上から順番に入力した場合のみ理想的な動作が行われること」

解決したい点
「数量を入力し直したり、下から上に戻り入力しても理想的な動作が行われること」

現在の挙動（上から順番に入力した場合）

現在のエラー挙動（数量再入力）

該当コード

<div class="cart-form-content">
  <%= form_for(@cart, url: carts_path, method: :post) do |f| %>
    <div class="order-form-content">
      <% if @favorite_list.present? %>
        <% @favorite_list.each do |item| %>
          <% @num = @num + 1 %>
          <div class='item-img-content'>
            <%= image_tag item.image, class: "item-index-img" if item.image.attached? %>
          </div>
          <div class='item-name-content' >
            <%= item.name %>
          </div>
          <div class='item-price-content'>
            <span id='item-price-id-<%= @num%>'><%= item.price %></span>円
          </div>
          <div class="order-form">
            <%= f.fields_for :orders do |f| %>
              <div class="order-item-id-form">
                <%= f.text_field :item_id, value: item.id, disabled: true %>
              </div>
              <div class="order-quanty-form">
                数量
                <%= f.text_field :quanty, id:"order-quanty-#{@num}" %>
              </div>
              <div class="order-price">
                小計
                <span id='order-price-output-<%= @num%>'></span>
              </div>
            <% end %>
          </div>
        <% end %>
      <% end %>
      <div class="total-price">
        合計
        <%= f.text_field :price, id:"cart-price" %>
      <div>
      <div class="cart-form-btn">
        <%= f.submit '登録', class: 'btn btn-primary' %>
      </div>
    </div>
  <% end %>
</div>

window.addEventListener('DOMContentLoaded', function() {
  let i = 0;
  sum = 0;
  do {
    i+=1;
    const itemPrice = document.getElementById(`item-price-id-${i}`).innerHTML;
    const orderQuanty = document.getElementById(`order-quanty-${i}`);
    const numOutput = i;
    orderQuanty.addEventListener("input", function() {
      if (numOutput == 1) {
        sum = 0;
      };
      const orderQuantyValue = orderQuanty.value;
      const orderPrice = orderQuantyValue * itemPrice;
      document.getElementById(`order-price-output-${numOutput}`).textContent = orderPrice;
      sum = sum + orderPrice;
      console.log(sum);
      const cartPrice = document.getElementById(`cart-price`);
      cartPrice.value = sum;
    });
  } while (i<4);
});

試したこと

JavaScriptの呼び出しの為に変数iをループ処理することでお気に入りした商品を取得している為、再入力した際に無限に数字が足され続けることは理解しておりますが、その解決方法が分からない為、ご教授いただきたいです。
試したこととしては、1回目のループの際は合計数値を０する様にsum＝0を追記致しました。

補足情報（FW/ツールのバージョンなど）

学習中な為、言語化が上手くできず申し訳ありません。その他必要情報等ありましたら追記致しますのでコメント頂けますと幸いです。

Comments

[no1knows]

画像やGIFはリンクではなく、直接貼り付けてください。リンクは時間が立つとあとから見れなくなります。
その結果、将来、同じ問題を抱えた人がこの質問に辿りついても、内容が理解ができなくなってしまうためです。

[takuya-siro]

コメント頂きありがとうございます。画像とGIFを直接の貼り付けに変更致しました。

Answer 1

querySelectorAll()を利用して、下記の流れで実装するのがシンプルで良い気がします。

1. すべての数量に同じクラスを追加
2. すべての小計に同じクラスを追加
3. 数量が入力されたら小計を計算してから、合計を計算する

参考：フォームが入力されたタイミングで処理を実行する

※Turbolinksを利用しているなら、そちらも含めて記述する必要があります。

Comments

[takuya-siro]

ご回答いただきありがとうございます。頂いた回答を元に一度、試行致します。

[no1knows]

はい！わからないところがあればコメントいただければと思います！

[takuya-siro]

コメントありがとうございます。一つ質問がありまして、フォームが入力された際の値(value)の取得はどのように行えばよろしいでしょうか？
現在は下記の様なコードで実装をしているのですが、数量が入力された時の値(value)が取得できません。
const orderQuantyValue = orderQuantity[i].value;こちらの行で任意の値(value)を取得することを想定しております。

```order_price.js
window.addEventListener('DOMContentLoaded', function() {
const itemPrices = document.querySelectorAll('.item-order-price');
const orderQuantity = document.querySelectorAll('.order-quanty-form');
orderQuantity.forEach(function(quantity) {
quantity.addEventListener("input", function() {
for (let i = 0; i < itemPrices.length; i++) {
const itemPriceValue = itemPrices[i].innerHTML;
const orderQuantyValue = orderQuantity[i].value;
const orderPrice = itemPriceValue * orderQuantyValue
console.log(orderPrice);
i+= 1;
};
});
});
});
```

[no1knows]

下記のような形です！
<p>ラテ</p>
<input type="number"></input>
<p data-price="100" class="sum"></p>
<p>ケーキ</p>
<input type="number"></input>
<p data-price="200" class="sum"></p>
<p>ナポリタン</p>
<input type="number"></input>
<p data-price="300" class="sum"></p>
<p class="total"></p>

<script>
window.addEventListener('DOMContentLoaded', function () {
const inputs = document.querySelectorAll('input');
inputs.forEach(function (input) {
input.addEventListener("input", function () {
console.log('入力したね！')
// 小計を計算して反映させる
// 上記ではdata属性を使って単価を登録しているが、ここはお好きに
// 参考：　https://into-the-program.com/dataset/

// querySelectorAllで小計をすべて取得し合計を計算して反映させる
const prices = document.querySelectorAll('sum');
})
})
})
</script>

[takuya-siro]

色々教えて頂き誠にありがとうございます。無事解決し、理想の形に実装できました。