repeating group内の小計を要素の外で合計したい

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を使う方法については、こちらの動画で解説しています。

ありがとうございます!挑戦してみます!:man_bowing:

「いいね!」 1