JavaScriptを使い、フォームを連動させて値を出力したいが、何度か繰り返すと誤った値が表示されてしまう。

Question

前提・実現したいこと

ruby on rails上でJavaScriptを使い、
一つのフォームに値を入力すると、他のフォームにも数字が出力される仕組みを実現したいです。

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

一度目は思った通りの処理が動きます。
ただ、何度かフォームの数字を打ち直していると、出力される数字が変わってしまいます。

この時、数字は2通り表示されます。一方は正しい値、もう一方は正しくない値ですが、正しくない方値も何度か繰り返しても同じ数字が出ます。

今回数字が変わってしまうのは下記コードのprice_two_valueの部分です。

例えば入力フォームに「30」と入力したら、当然ですが、その30をもとに計算出力したいです。
しかしなぜか、たびたび「3」に対して計算が行われているようです。その時に誤った表示がされています。

その「３」は、おそらく30を入力する途中、消す途中の「３」です。なぜこのような中途半端なタイミングで発火してしまうのか分かりません。

該当のソースコード

Comments

[m.ts10806]

実際のHTMLがないと他者には再現確認できません。

[退会済みユーザー]

失礼しました。修正しますので少々お待ちください。

[退会済みユーザー]

修正しました。ご確認いただけますでしょうか。

[yambejp]

ajaxなどでデータをサーバーに取りに行っていないならおそらくjsの問題ですので
railsの部分はすべてHTMLソースで記載してください
また再現性のある具体的なデータを提示されたほうがよいでしょう。
（どういったデータを、どのくらい処理すると、どういった結果になる・・・など）

[退会済みユーザー]

yambe.jpさん、アドバイスありがとうございます。

>>railsの部分はすべてHTMLソースで記載してください
現在書いてあるHTMLの記述と何が違うのでしょうか？
調べてもわからなかったため、教えていただけないでしょうか。

[yambejp]

> 現在書いてあるHTMLの記述と何が違う

HTMLとして単体で成立していません

[m.ts10806]

今現在提示されているのはRuby on Railsのテンプレートの記法です。
実際にはコンパイルされてHTMLになります。
Rails環境がないと動作確認できません。
求められているのはブラウザで「ソースを表示」で出力されるのがコンパイル後のHTMLです。

[退会済みユーザー]

お二方ともありがとうございます。
つまり、<%= %>部分の修正を行えば良いのでしょうか。

例えばform_withを修正してHTMLのform要素に書き換えたり。

[yambejp]

いや普通に、ブラウザに表示してブラウザで「ページの表示」などでHTMLをコピーできます

[m.ts10806]

「ブラウザで「ソースを表示」で出力されるHTML」と書いたのですけど・・・。

[退会済みユーザー]

方法がわかったため修正を行いました。
ありがとうございます。

皆さんからしたら常識的なところで時間をかけてしまってすみません。
どうぞご確認お願いいたします。

[退会済みユーザー]

すみません。

>求められているのはブラウザで「ソースを表示」で出力されるのがコンパイル後のHTMLです。
この一文は　求めらているのは〜されるのが〜です　と日本語の意味を理解するのが難しく、加えて私がソース表示を行ったことがないのもあり、理解できませんでした。

求められているのはコンパイル後のHTMLです。コンパイル後のHTMLは、ブラウザで「ソースを表示」を行うことで出力されます。

といった意味だったのですね。失礼しました。

[m.ts10806]

>常識的なところで
おそらくRailsから入り、それだけやってるとこうなるのかなと思いました。
仕方ないところではありますが、「Webアプリケーション」という観点では覚えることは沢山ありますし、覚えておいたほうができることの幅は全然違います。

[m.ts10806]

>と日本語の意味を理解するのが難しく
あいえ、２つのことを書こうとして混ざってしまいました。失礼しました。

[退会済みユーザー]

m.ts10806さん
アドバイスありがとうございます。
現在未経験からエンジニアスクールに通い、就職に向けてオリジナルアプリを作っているところです。

スクール側の決まりでスクールに対しては質問ができない状態なので、アドバイスいただけることが本当にありがたいです。

基礎的なところから教えてくださっていたのに理解できなかったのは私ですので、どうか謝らないでください。

問題解決に向けて、どうぞよろしくお願いいたします。

[no1knows]

全く質問と関係ないですが、本当にスクールなのかなと気になってコメントしてしまいました・・・
> スクール側の決まりでスクールに対しては質問ができない状態

[退会済みユーザー]

文字数オーバーしてしまったため、
当初書いてあったのに消してしまった、それぞれのコードの意味合いと、yambejpさんからご指摘いただいた、問題が起こる際の具体的な状況をこちらで共有させていただきます。

[退会済みユーザー]

前提として、今回作成中のアプリは割勘計算機能です。

total_payment（総支払額）とtotal_people（総人数）は前提条件のようなもので、このフォームに入力された値をもとに、様々な計算を行います。

そのほかにグループを三つ用意しています。

group_people_two、group_price_two、group_ratio_two
上記はグループ2の、左から順に人数、料金、比率の値を入れていくフォームです。

group_people_three、group_price_three、group_ratio_three
上記はグループ3です。

group_people_one、group_price_one、group_ratio_one
上記はグループ1ですが、グループ1のみ入力フォームではなく出力するために用意しています。
前提条件からグループ2と3の数値を引いて、グループ1に表示させようとしています。

price（料金）とratio（比率）に関しては、一方に値を入れた時、もう一方の値が自動で表示されるようにしています。
この部分で、今回の問題が発生しています。

indivisible_numberは余った値を出力しようとしています。

[退会済みユーザー]

**誤った値が出るタイミングにも規則性はなく、感覚的には10回ほど試したら２.３回誤った表示が出るイメージです。**

**グループ2またはグループ3の比率を変更したタイミングで誤表示が出ます。**

例えば総支払額に50,000、総人数に15、グループ２の人数5、比率に30と入力すると、
グループ2の一人当たりの価格が3000、グループ1の一人当たりの価格が3500とで出ます。これが正しい表示です。

続いて、グループ２の比率を消して、また30と入力すると、グループ一の一人当たりの価格4900になることがあリます。
何度か試していると、3000に戻ったり、4900に戻ったりを繰り返します。

[退会済みユーザー]

no1knowsさん
コメントありがとうございます。
名前は伏せますが、私がプログラミングに関心を持つ以前から知っていたくらい有名なスクールに通っております。

カリキュラムを進める上では質問可能なのですが、オリジナルアプリ作成中のみ質問が不可能なんです。

[no1knows]

とりあえず下記で同様のテストをして症状はでますか？
https://jsfiddle.net/9z0cop8n/

[退会済みユーザー]

no1knowさん
ありがとうございます。
そちらでも、同じ症状が出ております。

[kuma_kuma_]

横からでごめんね
気になったんだけど'keyup'イベントで’const'使いまくってるでしょ？
エレメント格納する意味で’const'は良いのだけれども
イベント内の変数は’const'じゃなくて'let'じゃない？
’const'はそのシステム上変化が発生しない定数として登録するものだから。

例えば
> const people_value = total_people.value;
変数people_valueの値はシステム全体から見た時total_people.valueによって値が変化する。
よって定数とは認められないので、この場合は
> let people_value = total_people.value;
となる。

変に'const'使うと値代入した時点で変数内の値が消滅する事もあるので使い方気を付けたほうが良いですよ。

[退会済みユーザー]

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

元々letを使っていたのですが、この問題と向き合う中でconstに修正してみて特に動作が変わらなかったので、値が変に変わらない方が今後エラーが起きないのではないかと思い、constにしていました。

letに直しておきます。
そしてconstとletの使い分けについて勉強してみます。

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

[kuma_kuma_]

ちなみにKeyUpしたら正確な値が取れるわけではない事は理解されていますか？

[退会済みユーザー]

kuma_kumaさん

いえ、そのような認識はありませんでした。
比率の部分以外はきちんと計算できていましたし、正確な値を取れているという認識でした。

[kuma_kuma_]

必ず KeyDown→値変更→KeyUp となるわけではありません
KeyUpしてから値変更となる場合があります。
(使っているブラウザやPCやモバイルの性能の関係で処理が重複したりして重くなると発生する)
KeyUpイベントとValue変更のタイミングが取れなくなる現象です。
inputイベントなら値変更後なんですが(古いブラウザにこだわらないのであれば)
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/input_event

数値項目ではinput="number"を使われては？(数字限定になります)
また取得した際はNumber()で文字を数値化するのをキチンとしてみたらどうですか？

[退会済みユーザー]

kuma_kumaさん
ありがとうございます！

イベント発火のタイミングをinputに変えてみたところ、値が毎回変わることは無くなったのですが、常に誤った値が表示されるようになってしまいました。

このコメント欄に載せた例でいうと、4900が常に表示されてしまいます。

[kuma_kuma_]

取得した際はNumber()で数字を数値化されるようにしましたか？
> const people_value = total_people.value;
を
> let people_value = Number(total_people.value);
に変更

[kuma_kuma_]

あと疑問なんだけどHTMLで
入力項目見るとinputが12項目あるのよ。
その内1項目は非表示、2項目がイベントあり。
なぜ残り9項目にイベント設定が無いの？

[退会済みユーザー]

kuma_kuma_さん
下記のようにすべての値にNumberをつけると、値が一部しか動かなくなってしまいました。
(HTMLでもinput = numberに変更しました)

Numberの使い方あってますでしょうか？

group_ratio_two.addEventListener('input', () => {
let people_value = Number(total_people.value);
let people_two_value = Number(group_people_two.value);

let people_three_value = Number(group_people_three.value);

let people = Number(people_value) - Number(people_two_value) - Number(people_three_value);
group_people_one.textContent = Number(people);

let payment_value = Number(total_payment.value);
let price_two_value = Number(group_price_two.value);
let price_three_value = Number(group_price_three.value);

let payment = (Number(payment_value) - ((Number(price_two_value) * Number(people_two_value)) + (Number(price_three_value) * Number(people_three_value)))) / Number(people);
let payment_cell = Math.ceil(Number(payment)/100)*100;
group_price_one.textContent = Number(payment_cell) ;

let ratio_two_value = Number(group_ratio_two.value);
let ratio_two = ((Number(ratio_two_value) / 100) * Number(payment_value)) / Number(people_two_value)
let ratio_cell_two = Math.ceil(Number(ratio_two)/100)*100;
group_price_two.value = Number(ratio_cell_two)

let ratio_three_value = Number(group_ratio_three.value);
group_ratio_one.textContent = 100 - rNumber(ratio_three_value) - Number(ratio_two_value);

let formula = (Number(payment_cell) * Number(people)) + (Number(price_two_value) * Number(people_two_value)) + (Number(price_three_value) * Number(people_three_value));
indivisible_number.textContent = (Number(formula) - Number(payment_value));
});

[退会済みユーザー]

イベント数に関してですが、実際にはすべてのイベントを記述しています。
文字数オーバーで書ききれなかったため、問題が起きているイベントのみ記述しています。

（そういった注意書きを当初記入していたのですが、それすら書けないくらい文字数が増えてしまいました。）

[yambejp]

codepenとかソースをおけるサイトを活用なさっては？

[退会済みユーザー]

yambejpさん
教えていただきありがとうございます。

こちらでご確認いただけますでしょうか。
https://codepen.io/kimura_0217/pen/eYzmVWL

[yambejp]

具体的にどこに何を入力したときに、想定値は何で間違った値はどうなるのでしょうか？

[退会済みユーザー]

下記の通りです。

グループ2またはグループ3の比率を変更したタイミングで誤表示が出ます。

例えば総支払額に50,000、総人数に15、グループ２の人数5、比率に30と入力すると、
グループ2の一人当たりの価格が3000、グループ1の一人当たりの価格が3500とで出ます。これが正しい表示です。

続いて、グループ２の比率を消して、また30と入力すると、グループ一の一人当たりの価格4900になることがあリます。
何度か試していると、3000に戻ったり、4900に戻ったりを繰り返します。

[yambejp]

とりあえずgroup-name-twoとgroup-name-threeのtypeをtextにしてください
またグループ１の比率が、グループ２の比率入力と連動していません
グループ２の金額入力でグループ３の情報がおかしくなります

[退会済みユーザー]

ありがとうございます。

・type修正しました。
・比率の連動に関しては、上記のやり取りでnumberをつけたところ連動しなくなりました。多分僕のやり方が間違ってるんだと思いますが、一旦元の形に修正させていただきました。
・グループ２の金額入力でグループ３の情報がおかしくなるというのは確認できていないのですが、どういった場合におかしくなっていますか？

上記の修正内容、コードペンに反映しました。
https://codepen.io/kimura_0217/pen/eYzmVWL

[退会済みユーザー]

それと先ほどお送りした、誤表示の出る条件の詳細ですが、
現在は少し表示が変わっている点を説明していませんでした。

他の方からのアドバイスを受けイベント発火のタイミングをkeyupからinputに変えたところ、グループ１の一人当たりの価格に、常に誤表示である4900が出力される状態になっています。

数字が変わらなくはなりましたが、正しい表示が一切出なくなってしまいました。

[kuma_kuma_]

あまり多数で書くと、話がおかしくなるので私はここまでとしておきます。
頑張ってください。

[kuma_kuma_]

ごめんどうしても一言
「0で割ってはいけません。」

[退会済みユーザー]

アドバイスありがとうございます。
もう少しだけ詳しく教えていただけないでしょうか。

比率のイベント発火時に、割り算を行なっている変数はpeople、 people_two_value、 people_three_valueの３つです。

これらの値をconsole.logを使って確認しましたが、いずれも値は入っていました。
0で割ってはいけないとはどういった意味でしょうか。

[kuma_kuma_]

ゼロで割る可能性があるのは2か所
/ people_two_value
/ people_three_value
これIf文も入れないで計算してるでしょ？
people_two_value → もとはinputの値で数値以外だと0
people_three_value → もとはinputの値で数値以外だと0
inputの項目初期値設定している？してても文字も入る場合あるんだよ？
そうすると途中でエラーになるから表示中途半端になるよ？
1 / 0 ＝ エラー だから電卓で試してごらん

[kuma_kuma_]

※他の回答者様大変申し訳ございません。我慢できませんでした。

[退会済みユーザー]

人に教える時、自分がとうに理解していることを理解していなかったり、調べれば書いてあることなのに調べてなかったりすると、そんな状態で聞いてくるなって腹が立ちますよね。

僕スクールでは進みが早い方なので、友人にカリキュラムの内容を教えている時、同じような気持ちを抱いたことがあります。お金もらってるわけじゃなく善意ですから尚更ですね。

でも、彼は本当に理解しようとしてもできなかったり、どう調べて良いか分からないから、最後のSOSで質問してきてるんです。

その気持ちが今回よく分かりましたし、そんな彼に対して寛大な心で教えてあげられなかった自分に腹が立ちました。今回の件を良い教訓にしたいと思います。

ネット上での言い争いはしたくないので、この辺りで失礼させていただきます。

また、自分が質問できるレベルに達していないことと、ランキング上位に名を連ねる実力者同士であっても評価のこと等で言い争いをしている様子に哀しくなったため、退会します。

このオリジナルアプリ作成は苦労すると思いますが、
転職サポートをフルに活用して転職し、そこで力をつけていきたいと思います。

また、今回の件はイベントをkeyupとinput両方作ることで解決できました。
皆様、たくさんアドバイスいただき、ありがとうございました。

[kuma_kuma_]

退会済みユーザーとなってしまいましたが、書いておきます。
ます私の件で退会されてしまったのなら大変申し訳なく思います。
ただ質問者様
「自分がとうに理解していることを理解していなかったり」
「自分が質問できるレベルに達していないこと」
これは誤解されていますよ？

私の場合「完全に丸投げ」で「回答のみもらえれば内容の解説など不要」「理解しようともしない」場合
指摘することもあります。

質問者様はキチンと手を動かし今ある知識でソフトを完成させようとしている。
未知の状況に対して手段を講じて考えている。
それであれば、みなさんが手を差し伸べてくれるでしょう。
私も本来であれば「横から口だし」する事はよくないのですが、質問者様の行動に感銘を受けて記載した次第です。

今回の問題が解決されたのであれば、本当に良かったと思います。
これから仕事でもプログラムにかかわっていくとの事ですので
質問者様のこれからに幸おおからんことを

Answer 1

退会された後のようですが、回答します。

原因は、計算の順序です。

   let price_two_value = group_price_two.value;    /* ←グループ2の一人当たり支払額 */
   const price_three_value = group_price_three.value;  
 
   const payment = (payment_value - ((price_two_value  /* ←グループ2の一人当たり支払額 */ * people_two_value) + (price_three_value * people_three_value))) / people;  
   const payment_cell = Math.ceil(payment/100)*100;  
   group_price_one.textContent = payment_cell ;  
 
 
   const ratio_two_value = group_ratio_two.value;  
   const ratio_two = ((ratio_two_value / 100) * payment_value) / people_two_value  
   const ratio_cell_two = Math.ceil(ratio_two/100)*100;  
   group_price_two.value = ratio_cell_two              /* ←グループ2の一人当たり支払額 */  

「グループ1の支払額」を算出するのに、「グループ2の一人当たり支払額」を用いているのですが、「グループ2の一人当たり支払額」自体は後から再計算されて変更されています。
つまり、「グループ1の支払額」は、入力変更前の値が一部使われている、ということです。

まあ、あえて言わせていただきますが、参考になれば幸いです。

Answer 2

質問者様ちゃんと整形しておかないと間違いにも気が付かなくなりますよ
修正点

• <inptt type="text">においてvalueに対し数値化処理を追加
• コメント追加
• 値を取得する際は、初めに一括で行う。

function calc(){
  // railsのビューファイルから、各入力・出力フォームのIDを取得している
  const total_payment = document.getElementById("total-payment");
  const total_people = document.getElementById("total-people");

  const group_people_one = document.getElementById("group-people-one");
  const group_price_one = document.getElementById("group-price-one");
  const group_ratio_one = document.getElementById("group-ratio-one");

  const group_people_two = document.getElementById("group-people-two");
  const group_price_two = document.getElementById("group-price-two");
  const group_ratio_two = document.getElementById("group-ratio-two");

  const group_people_three = document.getElementById("group-people-three");
  const group_price_three = document.getElementById("group-price-three");
  const group_ratio_three = document.getElementById("group-ratio-three");

  const indivisible_number = document.getElementById('indivisible-number');

 // グループ2
  group_ratio_two.addEventListener('input', () => {
    let people_value = isNaN(total_people.value) ? 0 : Number(total_people.value);                    // 総人数
    let payment_value = isNaN(total_payment.value) ? 0 : Number(total_payment.value);                 // 総支払額
    let people_two_value = isNaN(group_people_two.value) ? 0 : Number(group_people_two.value);        // グループ2の人数
    let price_two_value = isNaN(group_price_two.value) ? 0 : Number(group_price_two.value);           // グループ2の金額
    let ratio_two_value = isNaN(group_ratio_two.value) ? 0 : Number(group_ratio_two.value);           // グループ2のパーセント
    let price_three_value = isNaN(group_price_three.value) ? 0 : Number(group_price_three.value);     // グループ3の金額
    let people_three_value = isNaN(group_people_three.value) ? 0 : Number(group_people_three.value);  // グループ3の人数
    let ratio_three_value = isNaN(group_ratio_three.value) ? 0 : Number(group_ratio_three.value);     // グループ3のパーセント

    let people = people_value - people_two_value - people_three_value;
    group_people_one.textContent = people;                                                            // グループ1の人数(表示)

    let payment = (payment_value - ((price_two_value * people_two_value) + (price_three_value * people_three_value))) / people;
    let payment_cell = Math.ceil(payment/100)*100;
    group_price_one.textContent =  payment_cell;                                                      // グループ1の金額(表示)

    let ratio_two = ((ratio_two_value / 100) * payment_value) / people_two_value;
    let ratio_cell_two = Math.ceil(ratio_two/100)*100;
    group_price_two.value = ratio_cell_two;                                                           // グループ2の金額(表示)

    group_ratio_one.textContent = 100 - ratio_three_value - ratio_two_value;                          // グループ1のパーセント(表示)

    formula = (payment_cell * people) + (price_two_value * people_two_value) + (price_three_value * people_three_value);
    indivisible_number.textContent =  (formula - payment_value);                                      // あまり(表示)
  });
  // グループ2

  // グループ3
  group_ratio_three.addEventListener('input', () => {
    let people_value = isNaN(total_people.value) ? 0 : Number(total_people.value);                    // 総人数
    let payment_value = isNaN(total_payment.value) ? 0 : Number(total_payment.value);                 // 総支払額
    let people_two_value = isNaN(group_people_two.value) ? 0 : Number(group_people_two.value);        // グループ2の人数
    let price_two_value = isNaN(group_price_two.value) ? 0 : Number(group_price_two.value);           // グループ2の金額
    let ratio_two_value = isNaN(group_ratio_two.value) ? 0 : Number(group_ratio_two.value);           // グループ2のパーセント
    let people_three_value = isNaN(group_people_three.value) ? 0 : Number(group_people_three.value);  // グループ3の人数
    let price_three_value = isNaN(group_price_three.value) ? 0 : Number(group_price_three.value);     // グループ3の金額
    let ratio_three_value = isNaN(group_ratio_three.value) ? 0 : Number(group_ratio_three.value);     // グループ3のパーセント

    let people = people_value - people_two_value - people_three_value;
    group_people_one.textContent = people;                                                            // グループ1の人数(表示)

    let payment = (payment_value - ((price_two_value * people_two_value) + (price_three_value * people_three_value))) / people;
    let payment_cell = Math.ceil(payment/100)*100;
    group_price_one.textContent =  payment_cell;                                                      // グループ1の金額(表示)

    let ratio_three = ((ratio_three_value / 100) * payment_value) / people_three_value;
    let ratio_cell_three = Math.ceil(ratio_three/100)*100;
    group_price_three.value = ratio_cell_three;                                                       // グループ3の金額(表示)

    group_ratio_one.textContent = 100  - ratio_three_value - ratio_two_value;                         // グループ1のパーセント(表示)

    formula = (payment_cell * people) + (price_two_value * people_two_value) + (price_three_value * people_three_value);
    indivisible_number.textContent =  (formula - payment_value);                                      // あまり(表示)
  });
  // グループ3
 }
 window.addEventListener("load", calc);

Comments

[退会済みユーザー]

とても見やすくしていただいてありがとうございます！

次回以降は回答してくださる方々に失礼がないよう、
kuma_kuma_さんの記述を参考にして整形したのち質問するようにします。

たくさんアドバイスをいただき、本当にありがとうございました。