質問編集履歴
2
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -25,103 +25,5 @@
|
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
### ソースコード
|
|
28
|
-
前提として、下記コードのtotal_paymentが総支払額、total_peopleが総人数の入力フォーム。
|
|
29
28
|
|
|
30
|
-
group_people_oneは男性の人数で、
|
|
31
|
-
全体の人数ー女性の人数
|
|
32
|
-
と計算することで、男性の人数も確定する。
|
|
33
|
-
|
|
34
|
-
group_price_oneは男性一人当たりが支払う料金で、
|
|
35
|
-
（総支払額-女性の一人当たりの支払額×女性の人数）÷男性の人数
|
|
36
|
-
で計算し、出力する。
|
|
37
|
-
|
|
38
|
-
（この男性の人数と支払額を出力する欄は、当たり前だが、入力フォームではない。出力したいので）
|
|
39
|
-
|
|
40
|
-
group_people_twoは女性の人数、group_price_twoは女性の一人当たりの支払額。
|
|
41
|
-
|
|
42
|
-
合計で、入力フォームが4つ、出力フォームが２つある。
|
|
43
|
-
|
|
44
|
-
```JavaScript
|
|
45
|
-
|
|
46
|
-
function calc(){
|
|
47
|
-
// railsのビューファイルから、各入力・出力フォームのIDを取得している
|
|
48
|
-
const total_payment = document.getElementById("total-payment");
|
|
49
|
-
const total_people = document.getElementById("total-people");
|
|
50
|
-
|
|
51
|
-
const group_people_one = document.getElementById("group-people-one");
|
|
52
|
-
const group_price_one = document.getElementById("group-price-one");
|
|
53
|
-
const group_people_two = document.getElementById("group-people-two");
|
|
54
|
-
const group_price_two = document.getElementById("group-price-two");
|
|
55
|
-
// railsのビューファイルから、各入力・出力フォームのIDを取得している
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
// 女性の人数を打ち込むと、男性の人数が表示される
|
|
59
|
-
group_people_two.addEventListener('keyup', () => {
|
|
60
|
-
let people_value = total_people.value;
|
|
61
|
-
let people_two_value = group_people_two.value;
|
|
62
|
-
|
|
63
|
-
let people = people_value - people_two_value;
|
|
64
|
-
group_people_one.textContent = people;
|
|
65
|
-
|
|
66
|
-
});
|
|
67
|
-
// 女性の人数を打ち込むと、男性の人数が表示される
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
// 女性の一人当たりの支払額を打ち込むと、男性の一人当たりの支払額が表示される
|
|
71
|
-
group_price_two.addEventListener('keyup', () => {
|
|
72
|
-
// この欄は繰り返しの記述になるが、私のスキルでは上記の関数から持ってくることができなかったので、ないと正しく出力できない
|
|
73
|
-
let people_value = total_people.value;
|
|
74
|
-
let people_two_value = group_people_two.value;
|
|
75
|
-
|
|
76
|
-
let people = people_value - people_two_value;
|
|
77
|
-
group_people_one.textContent = people;
|
|
78
|
-
// この欄は繰り返しの記述になるが、私のスキルでは上記の関数から持ってくることができなかったので、ないと正しく出力できない
|
|
79
|
-
|
|
80
|
-
let payment_value = total_payment.value;
|
|
81
|
-
let price_two_value = group_price_two.value;
|
|
82
|
-
|
|
83
|
-
let payment = (payment_value - price_two_value * people_two_value) / people;
|
|
84
|
-
group_price_one.textContent = payment;
|
|
85
|
-
|
|
86
|
-
});
|
|
87
|
-
// 女性の一人当たりの支払額を打ち込むと、男性の一人当たりの支払額が表示される
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
window.addEventListener("load", calc);
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
### 試したこと
|
|
94
|
-
下記のように入力することで、人数に関しては総人数から入力しても、女性の人数から入力しても、最終的に正しく表示できるようになった。
|
|
95
|
-
|
|
96
|
-
```
|
|
97
|
-
// 総人数を打ち込むと、男性の人数が表示される
|
|
98
|
-
total_people.addEventListener('keyup', () => {
|
|
99
|
-
let people_value = total_people.value;
|
|
100
|
-
let people_two_value = group_people_two.value;
|
|
101
|
-
|
|
102
|
-
let people = people_value - people_two_value;
|
|
103
|
-
group_people_one.textContent = people;
|
|
104
|
-
|
|
105
|
-
});
|
|
106
|
-
// 総人数を打ち込むと、男性の人数が表示される
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
しかし同じ要領で下記のように支払額について記述すると、総支払額、女性の支払額、どちらから打ち込んでも男性の支払額欄にinfinityと表示されてしまう。
|
|
110
|
-
|
|
111
|
-
```
|
|
112
|
-
// 総支払額を打ち込むと、男性の支払額が表示される
|
|
113
|
-
group_price_two.addEventListener('keyup', () => {
|
|
114
|
-
let people_value = total_people.value;
|
|
115
|
-
let people_two_value = group_people_two.value;
|
|
116
|
-
|
|
117
|
-
let people = people_value - people_two_value;
|
|
118
|
-
group_people_one.textContent = people;
|
|
119
|
-
|
|
120
|
-
let payment_value = total_payment.value;
|
|
121
|
-
let price_two_value = group_price_two.value;
|
|
122
|
-
|
|
123
|
-
let payment = (payment_value - price_two_value * people_two_value) / people;
|
|
124
|
-
group_price_one.textContent = payment;
|
|
125
|
-
});
|
|
126
|
-
// 総支払額を打ち込むと、男性の支払額が表示される
|
|
127
29
|
```
|
1
タグの変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|