前提
ruby on railsで商品発注システムを作成しており、現在は商品購入画面の実装を行なっています。
複数の商品を同時購入できる事を理想としています。商品購入画面で表示される商品はユーザーがお気に入りした商品のみが表示される様に限定しております。
下記が現在の実装のスクショとなります。
実現したいこと
・商品毎の数量の欄に注文数量を入力すると、商品価格x数量が小計に自動表示されること。
・全ての小計の合計が合計の欄に表示されること。
上記の二つを現在の目標としております。
発生している問題・エラーメッセージ
問題
「商品の数量を上から順番に入力した場合のみ理想的な動作が行われること」
解決したい点
「数量を入力し直したり、下から上に戻り入力しても理想的な動作が行われること」
現在の挙動(上から順番に入力した場合)
現在のエラー挙動(数量再入力)
該当コード
new.html.erb
1<div class="cart-form-content"> 2 <%= form_for(@cart, url: carts_path, method: :post) do |f| %> 3 <div class="order-form-content"> 4 <% if @favorite_list.present? %> 5 <% @favorite_list.each do |item| %> 6 <% @num = @num + 1 %> 7 <div class='item-img-content'> 8 <%= image_tag item.image, class: "item-index-img" if item.image.attached? %> 9 </div> 10 <div class='item-name-content' > 11 <%= item.name %> 12 </div> 13 <div class='item-price-content'> 14 <span id='item-price-id-<%= @num%>'><%= item.price %></span>円 15 </div> 16 <div class="order-form"> 17 <%= f.fields_for :orders do |f| %> 18 <div class="order-item-id-form"> 19 <%= f.text_field :item_id, value: item.id, disabled: true %> 20 </div> 21 <div class="order-quanty-form"> 22 数量 23 <%= f.text_field :quanty, id:"order-quanty-#{@num}" %> 24 </div> 25 <div class="order-price"> 26 小計 27 <span id='order-price-output-<%= @num%>'></span> 28 </div> 29 <% end %> 30 </div> 31 <% end %> 32 <% end %> 33 <div class="total-price"> 34 合計 35 <%= f.text_field :price, id:"cart-price" %> 36 <div> 37 <div class="cart-form-btn"> 38 <%= f.submit '登録', class: 'btn btn-primary' %> 39 </div> 40 </div> 41 <% end %> 42</div>
order_price.js
1window.addEventListener('DOMContentLoaded', function() { 2 let i = 0; 3 sum = 0; 4 do { 5 i+=1; 6 const itemPrice = document.getElementById(`item-price-id-${i}`).innerHTML; 7 const orderQuanty = document.getElementById(`order-quanty-${i}`); 8 const numOutput = i; 9 orderQuanty.addEventListener("input", function() { 10 if (numOutput == 1) { 11 sum = 0; 12 }; 13 const orderQuantyValue = orderQuanty.value; 14 const orderPrice = orderQuantyValue * itemPrice; 15 document.getElementById(`order-price-output-${numOutput}`).textContent = orderPrice; 16 sum = sum + orderPrice; 17 console.log(sum); 18 const cartPrice = document.getElementById(`cart-price`); 19 cartPrice.value = sum; 20 }); 21 } while (i<4); 22});
試したこと
JavaScriptの呼び出しの為に変数iをループ処理することでお気に入りした商品を取得している為、再入力した際に無限に数字が足され続けることは理解しておりますが、その解決方法が分からない為、ご教授いただきたいです。
試したこととしては、1回目のループの際は合計数値を0する様にsum=0を追記致しました。
補足情報(FW/ツールのバージョンなど)
学習中な為、言語化が上手くできず申し訳ありません。その他必要情報等ありましたら追記致しますのでコメント頂けますと幸いです。
回答1件