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

**URL:** <https://www.nocode-faq.com/t/topic/4157>\
**Category:** bubble\
**Tags:** フロントエンド\
**Created:** [2024 年 2 月 29 日午前 11:11 UTC](https://www.nocode-faq.com/t/topic/4157 "2024-02-29T11:11:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tomoki](https://avatars.discourse-cdn.com/v4/letter/t/50afbb/32.png) [@tomoki](https://www.nocode-faq.com/u/tomoki)\
**Post date:** [2024 年 2 月 29 日午前 11:11 UTC](https://www.nocode-faq.com/t/topic/4157/1 "2024-02-29T11:11:27Z")

</div>

### 1.前提条件

repeating groupでDBに記載の  
・商品単価  
を表示している

### 2.発生している問題

repeating group内で  
「商品単価×プルダウンで選んだ個数」で計算した小計をtext要素で表示している。  
それらの小計をrepeating group外で合計したいが、小計:sumのような選択ができない。

### 3.エラーメッセージ

なし

### 4.実装したい機能

リアルタイムで注文金額がわかるUI。  
プルダウンで選択した商品ごとの個数が、商品ごとの単価に対して掛けられ、承継として表示されている。それらの合計を表示したい。

### 5.スクリーンショット

 ![スクリーンショット 2024-02-29 20.01.21](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/c02935a1ec4be665680d7a63737b6f63b5f555bc.jpeg)

### 6.試したこと

・小計を表示するtext要素の位置を変更した  
・text要素ではなく、inputを使った  
いずれも有効な手段ではなかった。

### 7.補足情報 （調べたURL/参考になりそうな事例）

> **[Sum a repeating group](https://forum.bubble.io/t/sum-a-repeating-group/232008/3)**
>
> Hi @paulgbray Here is the solution for your problem… You can get the sum of item from each line of a repeating group by this method as shown in the screenshot.(Note the total data type must be in number the database). Total showed in the...

試したが前提条件が違うのか対策にならなかった。

---

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2024 年 2 月 29 日午後 1:47 UTC](https://www.nocode-faq.com/t/topic/4157/2 "2024-02-29T13:47:51Z")

</div>

Javascriptのdocument.querySelectorを使うことで、Repeating Group内の値を個別に指定して取得することができます。

> **[Gyazo Screen Video](https://gyazo.com/b6306f8b4e2e8d1bf9fff3d4681d5972)**
>
> Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortless and engaging.

エラーハンドリングしていませんが、以下のコードを使用しています。

```auto
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を付与してあげてください。

 ![スクリーンショット 2024-02-29 15.44.41](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/2/25ec24e74a3a2597ca7d943e1e9e4f2548bf1fb4.png)

BubbleでJSを使う方法については、こちらの動画で解説しています。

> **[【Bubble構築＆質問会】Javascriptの使い方解説](https://www.youtube.com/live/xMFnciMy4hM?si=gmkqDxdGkKqlqE3V&t=2329)**
>
> ノーコードツールBubbleの開発を共有しながら、質問募集をしていきます。自社開発中のアプリやちょっとしたTipsなどを画面共有しながら解説していますが、Bubbleの質問であればなんでもOKです。お気軽に参加ください。・配信者じょん - KoronCoron CEOBubble受託開発2年目 / エストニアに起...

---

<div class="post-metadata">

**Author:** ![tomoki](https://avatars.discourse-cdn.com/v4/letter/t/50afbb/32.png) [@tomoki](https://www.nocode-faq.com/u/tomoki)\
**Post date:** [2024 年 2 月 29 日午後 10:45 UTC](https://www.nocode-faq.com/t/topic/4157/3 "2024-02-29T22:45:28Z")

</div>

ありがとうございます！挑戦してみます！🙇‍♂️