JavaScriptでフォームを連動させ、どの順番で入力してもすべてのフォームに反映されるようにしたい

Question

前提・実現したいこと

Javascriptをruby on railsのビュー上で使用し、再読み込みせずにブラウザ上で計算を行えるように実装したいです。

今回作成中のアプリは割勘計算機能がメインで、一部の人の支払額が決まっているとき（例えば飲み会で女性は一人3000円だけ支払えば良い時など）、その他の残った人たち（男性）の一人当たりの支払額を最終的に表示したいです。

下記からは、飲み会での男女の例がわかりやすいのでそれをもとに説明していきます。

基本的な使い方としては、総支払額と総人数をまず入力し、その後女性の人数と一人当たりの支払額を入力すれば、男性の人数と一人当たりの支払額も表示します。

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

上記の機能自体は現在実装できているのですが、決まった順番でしか正常に動作しないのが今回の問題です。

想定どおり最初に総支払額と総人数を打ち込んでから女性の支払額や人数を打ち込むと正常に動作します。

しかし、例えばすべて入力後に後から総支払額を変更すると、本来それに連動して男性の一人当たりの支払額も変更してほしいところですが、反映されず最初に出力された値から変わりません。

どの順番でフォームに入力しても、きちんとすべて反映されている状態にしたいのです。

（また、下記コードを見ていただければわかると思いますが、何度も同じ記述を繰り返してしまっています。もしその辺りをまとめる方法等あれば、それだけでも教えていただけるとありがたいです。）

どうぞよろしくお願いいたします。

ソースコード

Comments

[yambejp]

javaタグはjavascript?

[退会済みユーザー]

その通りです。誤ってタグを登録してしまいました、すみません。

[退会済みユーザー]

現在修正依頼中です。

[AkitoshiManabe]

例示した条件だけですと、割勘計算とは名ばかりの会費徴収システム（業務依頼）にも捉えられます。
var totalPrice = 16000;
var organizer = 3; // 主催者（男）
var participant = 3; // 参加者（女）
var entryFee = 3000; // 参加費
console.log( totalPrice / (organizer+participant) ); // 平均：2666.6... 参加費3000円は疑問
（参加費の丸め方は示しておいたほうが良いと思います：追記）

[maisumakun]

> 例えばすべて入力後に後から総支払額を変更すると、本来それに連動して男性の一人当たりの支払額も変更してほしいところですが

男性の支払額だけ変わる、という仕様で問題ないのでしょうか？

[退会済みユーザー]

AkitoshiManabeさん
アドバイスありがとうございます！

おっしゃる通りなので、これから丸め方等も実装していきたいと思います。

[退会済みユーザー]

maisumakunさん
おっしゃる通りです。
返答遅れてしまい申し訳ありません。

Answer 1

こんにちは。

しかし、例えばすべて入力後に後から総支払額を変更すると、本来それに連動して男性の一人当たりの支払額も変更してほしいところですが、反映されず最初に出力された値から変わりません。

ご提示のコードの

total_people.addEventListener('keyup', () => {
...
})

これは、total_people の中でキーが押されて離れた時に...をしなさい、という意味です。

ですので、「総支払額を変更すると...してほしい」のであれば、「総支払額」のフォームで同様のことを書かなくてはいけません。

具体的に言うと、total_payment に対しての処理を書いてみてください。

---

どの順番でフォームに入力しても、きちんとすべて反映されている状態にしたいのです。

同様に、他のフォーム全てに対して、同様のことをすればいいかと思います

参考になれば幸いです。

Comments

[退会済みユーザー]

ありがとうございます！解決しました！

総人数の方はきちんとtotal_peopleに対してイベント発火を行なっているのに、
教えていただいた通り、総支払額の方でミスをしてしまっていたのが原因でした。

ケアレスミスで駄文を読ませてしまい申し訳ないですが、
煮詰まっていて自分では解決できなかったと思うのでありがたいです。

本当にありがとうございました。