tomoki
2024 年 2 月 29 日午前 11:11
1
1.前提条件
repeating groupでDBに記載の
・商品単価
を表示している
2.発生している問題
repeating group内で
「商品単価×プルダウンで選んだ個数」で計算した小計をtext要素で表示している。
それらの小計をrepeating group外で合計したいが、小計:sumのような選択ができない。
3.エラーメッセージ
なし
4.実装したい機能
リアルタイムで注文金額がわかるUI。
プルダウンで選択した商品ごとの個数が、商品ごとの単価に対して掛けられ、承継として表示されている。それらの合計を表示したい。
5.スクリーンショット
6.試したこと
・小計を表示するtext要素の位置を変更した
・text要素ではなく、inputを使った
いずれも有効な手段ではなかった。
7.補足情報 (調べたURL/参考になりそうな事例)
試したが前提条件が違うのか対策にならなかった。
Javascriptのdocument.querySelectorを使うことで、Repeating Group内の値を個別に指定して取得することができます。
エラーハンドリングしていませんが、以下のコードを使用しています。
let result = []
for(i=1;i<=<Repeating Group List Count>;i++){
let x = parseFloat(document.querySelector(`#price_${i}`).value);
let y = parseFloat(document.querySelector(`#item_${i}`).value);
result[i] = x * y
}
bubble_fn_total(result)
Repeating group内のリストカウント分の掛け算を繰り返し処理(for文)を使って実装しています。
document.querySelectorを使う場合、input formsにidを付与する必要があるので、current cell’s indexを使って、他と被らないidを付与してあげてください。
BubbleでJSを使う方法については、こちらの動画で解説しています。