teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

修正

2020/07/26 03:04

投稿

退会済みユーザー
answer CHANGED
@@ -1,95 +1,25 @@
1
- 計算処理は上手くいくとのことですので、その部分は省略します。
1
+ 2020/7/26 修正
2
2
 
3
+ 文字数オーバーだったので、書き直してます。
3
- 修正案とて、
4
+ ソース修正しました。
4
- ・チェックがOKだったら、setTimeout(calculateResults, 100);を実行する
5
- ・calculateResultsの中でチェックを行う
6
- があります。
7
5
 
8
- 以下修正サンプルです。
6
+ まずyearsのセレクトボックスについて文字列も混在とのことですが、自分のソースのyearsEnumの値を対応するものに変えて頂ければ対応可能です
9
7
 
10
- ```JavaScript
11
- document.loanform.addEventListener('submit', function(e) {
12
- document.getElementById('results').style.display = 'none';
13
- document.getElementById('loading').style.display = 'block';
14
- if (checkValue()) {
15
- setTimeout(calculateResults, 100);
16
- }
17
- e.preventDefault();
18
- });
19
-
20
- /*
21
- * 計算前チェック処理
22
- */
23
- var checkValue = function() {
24
- if (!document.getElementsByName("amount")) {
25
- // ここにアラート等を入れる
26
- return false;
27
- } else if (!document.getElementsByName("downpayment")) {
28
- // ここにアラート等を入れる
29
- return false;
30
- } else if (!document.getElementsByName("cb_amount")) {
31
- // ここにアラート等を入れる
32
- return false;
33
- } else if (!document.loanform.years.value) {
34
- // ここにアラート等を入れる
35
- return false;
36
- }
37
- return true;
38
- }
39
8
  ```
40
-
41
- チェック処理内にてbooleanを返して、setTimeoutを行うか判定してます。
42
- checkValue()内はいくらでも改良可能なので、他の必須チェックや相関チェックなどがあればここに入れます。
43
- 今回は直書きしてますが、
44
-
45
- ```JavaScript
46
- /*
9
+ /**
47
- * 計算前チェック処理
10
+ * yaersコンボボックス要素
48
11
  */
49
- var checkValue = function() {
50
- var amount = document.getElementsByName("amount");
51
- var downpayment = document.getElementsByName("downpayment");
52
- var cb_amount = document.getElementsByName("cb_amount");
53
- var years = document.loanform.years.value;
54
-
55
- if (!amount) {
12
+ var yearsEnum = {
56
- // ここにアラート等を入れる
13
+ "1": {
14
+ valueInt: 1,
57
- return false;
15
+ interest: 1.5
58
- } else if (!downpayment) {
59
- // ここにアラート等を入れる
60
- return false;
61
- } else if (!cb_amount) {
62
- // ここにアラート等を入れる
63
- return false;
64
- } else if (!years) {
65
- // ここにアラート等を入れる
66
- return false;
67
- }
16
+ },
17
+ "2": {
18
+ valueInt: 2,
68
- return true;
19
+ interest: 2.5
20
+ },
69
21
  }
70
22
 
71
- ```
72
-
73
- みたいにすると、相関チェックなどの他のチェックの際に変数を使い回せます。
74
-
75
-
76
-
77
- 2020/7/23 20:44 追記
78
-
79
- コードレビューのようになってしまいましたが(そんなのできるような人間ではありませんが)
80
- ソースを全体的に修正しました。
81
- インデントをタブで行っていることについてはご容赦ください。
82
-
83
- まず全体的に見やすいようにコメントを追加しました。
84
- コメントに関して質問者様は英語で記載されておりますが、海外の方にソースを見てもらうことがない限りは日本語がいいです。
85
- コメントは、「自分がソースを見たときにわかりやすい」「他の人が後に改修する際にわかりやすい」というのが大事です。
86
- 実際私がコメントを表記する際に、わからなかった箇所が多いです。計算部分についてはいまだに分からなかったので、コメントは記述してません。
87
- (cb_amountとコメントしている箇所についても、「借入金」だったり「年間金利発生回数」だったり記述すしたほうがいいです。)
88
-
89
- 以下コードです。(なるべく元のコードを残そうとしてはいますが、全体的な修正になってます。)
90
-
91
- ```JavaScript
92
-
93
23
  // サブミットイベント
94
24
  document.loanform.addEventListener('submit', function(e) {
95
25
 
@@ -112,9 +42,9 @@
112
42
  function checkValue() {
113
43
  let rtn = true; // 返却用
114
44
 
115
- let downpayment = document.getElementsByName("downpayment")[0].value; // downpayment
45
+ let downpayment = document.getElementsByName('downpayment')[0].value; // 頭金
116
- let amount = document.getElementsByName("amount")[0].value; // amount
46
+ let amount = document.getElementsByName('amount')[0].value; // 製品料金
117
- let cb_amount = document.getElementsByName("cb_amount")[0].value; // cb_amount
47
+ let cb_amount = document.getElementsByName('cb_amount')[0].value; // ボーナス支払い金額
118
48
  let selectedYears = document.loanform.years.value; // years
119
49
 
120
50
  // 必須チェック
@@ -146,8 +76,12 @@
146
76
 
147
77
  // 必須チェックがtrueの場合、相関チェックを行う
148
78
  if (rtn) {
79
+
149
- if (cb_amount <= ( amount - downpayment ) / 2 ) {
80
+ if (cb_amount >= ( amount - downpayment ) / 2 ) {
81
+
82
+ // ボーナス併用払い金額 >= 商品代金と頭金の差額 / 2の場合エラー
150
83
  showError("Please check cb_amount ");
84
+ rtn = false;
151
85
  }
152
86
  }
153
87
 
@@ -159,9 +93,9 @@
159
93
  * 金利の算出
160
94
  */
161
95
  function calculateResults(e) {
162
- let downpayment = document.getElementsByName("downpayment")[0].value; // downpayment
96
+ let downpayment = document.getElementsByName('downpayment')[0].value; // 頭金
163
- let amount = document.getElementsByName("amount")[0].value; // amount
97
+ let amount = document.getElementsByName('amount')[0].value; // 製品料金
164
- let cb_amount = document.getElementsByName("cb_amount")[0].value; // cb_amount
98
+ let cb_amount = document.getElementsByName('cb_amount')[0].value; // ボーナス支払い金額
165
99
  let years, interest;
166
100
 
167
101
  // yearsコンボボックス内選択値に応じて、years, interestをENUMから設定
@@ -175,47 +109,34 @@
175
109
  console.log('amount = ' + amount);
176
110
  console.log('cb_amount = ' + cb_amount);
177
111
 
178
- const difference = amount - downpayment;
179
- const cbTimes= years * 2;
180
- const cbEveryPayment = cb_amount / cbTimes;
181
- const paymentTimes = years * 12;
182
- const interestMod = 1 + (interest / 100);
183
- const amountWithoutBns = difference * interestMod;
184
- const totalPayment = (difference - cb_amount) * interestMod;
185
- const justDevideMonthlyPayment = totalPayment / paymentTimes;
186
- const secondToLastMonthlyPayment = (Math.floor(justDevideMonthlyPayment / 100) * 100);
187
- const firstMonthlyPayment = totalPayment - (secondToLastMonthlyPayment * (paymentTimes - 1));
188
- const totalInterest = (difference * interestMod) - difference;
189
112
 
113
+ const difference = amount - downpayment; // 商品代金と頭金の差額
114
+ const cbTimes = years * 2; // ボーナス支払いの回数
115
+ const cbEveryPayment = cb_amount / cbTimes; // ボーナス一回あたりに支払う金額
116
+ const paymentTimes = years * 12; // 支払い回数(ボーナス除く)
117
+ const interestMod = 1 + (interest / 100); // 手を加えた金利を算出
118
+ // const amountWithoutBns = difference * interestMod;
119
+ const totalPayment = (difference - cb_amount) * interestMod; // ボーナス支払い以外の支払金額を算出
120
+ const justDevideMonthlyPayment = totalPayment / paymentTimes; // ひと月辺りの支払額を一度算出
121
+ const secondToLastMonthlyPayment = (Math.floor(justDevideMonthlyPayment / 100) * 100); // 10円単位の切り捨て
122
+ const firstMonthlyPayment = totalPayment - (secondToLastMonthlyPayment * (paymentTimes - 1)); // 切り捨て額を1ヶ月目の支払額に集約
123
+ const totalInterest = (difference * interestMod) - difference; // 商品にかかる金利
190
124
 
125
+
191
126
  // 各項目にセット
192
127
  document.getElementById('monthly-payment1').value = comma(parseInt(firstMonthlyPayment));
193
128
  document.getElementById('monthly-payment2').value = comma(parseInt(secondToLastMonthlyPayment));
194
- document.getElementById('total-payment').value = comma(parseInt(amountWithoutBns));
129
+ document.getElementById('total-payment').value = comma(parseInt(interestMod));
195
130
  document.getElementById('total_interest').value = comma(parseInt(totalInterest));
196
- // showyears.value = years;
131
+ document.getElementById('showyears').value = years;
197
- // showinterest.value = interest / 100;
132
+ document.getElementById('showinterest').value = interest / 100;
198
- // showdiffrence.value = comma(parseInt(difference));
133
+ document.getElementById('showdiffrence').value = comma(parseInt(difference));
199
- cb_num.value = cbTimes;
134
+ document.getElementById('cb_num').value = cbTimes;
200
- cb_input.value = comma(parseInt(cb_amount));
135
+ document.getElementById('cb_input').value = comma(parseInt(cb_amount));
201
- cb_everypayment.value = comma(parseInt(cbEveryPayment));
136
+ document.getElementById('cb_everypayment').value = comma(parseInt(cbEveryPayment));
202
137
  }
203
138
 
204
139
  /**
205
- * yaersコンボボックス関連ENUM
206
- */
207
- var yearsEnum = {
208
- "1": {
209
- valueInt: 1,
210
- interest: 1.5
211
- },
212
- "2": {
213
- valueInt: 2,
214
- interest: 2.5
215
- },
216
- }
217
-
218
- /**
219
140
  * 金額をカンマ編集する
220
141
  * @param num 金額
221
142
  * @return カンマ編集後の金額
@@ -230,7 +151,7 @@
230
151
 
231
152
  // Error message
232
153
  function showError(error){
233
- console.log("Error");
154
+ console.log("Error ..." + error);
234
155
 
235
156
  // create a div
236
157
  const errorDiv = document.createElement("div");
@@ -256,11 +177,4 @@
256
177
  function clearError() {
257
178
  document.querySelector(".alert").remove();
258
179
  }
259
-
260
- function onCheckValueError(message) {
261
- showError(message);
262
- console.log("Error");
263
- }
264
- ```
180
+ ```
265
-
266
- またわからない箇所があればコメントください。

2

追記

2020/07/26 03:04

投稿

退会済みユーザー
answer CHANGED
@@ -70,4 +70,197 @@
70
70
 
71
71
  ```
72
72
 
73
- みたいにすると、相関チェックなどの他のチェックの際に変数を使い回せます。
73
+ みたいにすると、相関チェックなどの他のチェックの際に変数を使い回せます。
74
+
75
+
76
+
77
+ 2020/7/23 20:44 追記
78
+
79
+ コードレビューのようになってしまいましたが(そんなのできるような人間ではありませんが)
80
+ ソースを全体的に修正しました。
81
+ インデントをタブで行っていることについてはご容赦ください。
82
+
83
+ まず全体的に見やすいようにコメントを追加しました。
84
+ コメントに関して質問者様は英語で記載されておりますが、海外の方にソースを見てもらうことがない限りは日本語がいいです。
85
+ コメントは、「自分がソースを見たときにわかりやすい」「他の人が後に改修する際にわかりやすい」というのが大事です。
86
+ 実際私がコメントを表記する際に、わからなかった箇所が多いです。計算部分についてはいまだに分からなかったので、コメントは記述してません。
87
+ (cb_amountとコメントしている箇所についても、「借入金」だったり「年間金利発生回数」だったり記述すしたほうがいいです。)
88
+
89
+ 以下コードです。(なるべく元のコードを残そうとしてはいますが、全体的な修正になってます。)
90
+
91
+ ```JavaScript
92
+
93
+ // サブミットイベント
94
+ document.loanform.addEventListener('submit', function(e) {
95
+
96
+ // 入力チェック通過後、calculateResultsを実行する
97
+ if (checkValue()) {
98
+ // 活性制御
99
+ document.getElementById('results').style.display = 'none';
100
+ document.getElementById('loading').style.display = 'block';
101
+
102
+ // calculateResults実行
103
+ setTimeout(calculateResults, 3500);
104
+ }
105
+ e.preventDefault();
106
+ });
107
+
108
+ /**
109
+ * 計算前チェック処理
110
+ * @return チェックOK:true, チェックNG:false
111
+ */
112
+ function checkValue() {
113
+ let rtn = true; // 返却用
114
+
115
+ let downpayment = document.getElementsByName("downpayment")[0].value; // downpayment
116
+ let amount = document.getElementsByName("amount")[0].value; // amount
117
+ let cb_amount = document.getElementsByName("cb_amount")[0].value; // cb_amount
118
+ let selectedYears = document.loanform.years.value; // years
119
+
120
+ // 必須チェック
121
+ if (!amount) {
122
+
123
+ // amountが未設定の場合エラー
124
+ showError("Please check amount");
125
+ rtn = false;
126
+
127
+ } else if (!downpayment) {
128
+
129
+ // downpaymentが未設定の場合エラー
130
+ showError("Please check downpayment.");
131
+ rtn = false;
132
+
133
+ } else if (!cb_amount) {
134
+
135
+ // cb_amountが未設定の場合エラー
136
+ showError("Please check cb_amount.");
137
+ rtn = false;
138
+
139
+ } else if (!selectedYears) {
140
+
141
+ // yearsが未選択の場合エラー
142
+ showError("Please check selectbox of years.");
143
+ rtn = false;
144
+
145
+ }
146
+
147
+ // 必須チェックがtrueの場合、相関チェックを行う
148
+ if (rtn) {
149
+ if (cb_amount <= ( amount - downpayment ) / 2 ) {
150
+ showError("Please check cb_amount ");
151
+ }
152
+ }
153
+
154
+ // チェック通過
155
+ return rtn;
156
+ }
157
+
158
+ /**
159
+ * 金利の算出
160
+ */
161
+ function calculateResults(e) {
162
+ let downpayment = document.getElementsByName("downpayment")[0].value; // downpayment
163
+ let amount = document.getElementsByName("amount")[0].value; // amount
164
+ let cb_amount = document.getElementsByName("cb_amount")[0].value; // cb_amount
165
+ let years, interest;
166
+
167
+ // yearsコンボボックス内選択値に応じて、years, interestをENUMから設定
168
+ let selectedYears = document.loanform.years.value;
169
+ years = yearsEnum[selectedYears].valueInt;
170
+ interest = yearsEnum[selectedYears].interest;
171
+
172
+ // 算出
173
+ console.log('Calculating...');
174
+ console.log('downpayment = ' + downpayment);
175
+ console.log('amount = ' + amount);
176
+ console.log('cb_amount = ' + cb_amount);
177
+
178
+ const difference = amount - downpayment;
179
+ const cbTimes= years * 2;
180
+ const cbEveryPayment = cb_amount / cbTimes;
181
+ const paymentTimes = years * 12;
182
+ const interestMod = 1 + (interest / 100);
183
+ const amountWithoutBns = difference * interestMod;
184
+ const totalPayment = (difference - cb_amount) * interestMod;
185
+ const justDevideMonthlyPayment = totalPayment / paymentTimes;
186
+ const secondToLastMonthlyPayment = (Math.floor(justDevideMonthlyPayment / 100) * 100);
187
+ const firstMonthlyPayment = totalPayment - (secondToLastMonthlyPayment * (paymentTimes - 1));
188
+ const totalInterest = (difference * interestMod) - difference;
189
+
190
+
191
+ // 各項目にセット
192
+ document.getElementById('monthly-payment1').value = comma(parseInt(firstMonthlyPayment));
193
+ document.getElementById('monthly-payment2').value = comma(parseInt(secondToLastMonthlyPayment));
194
+ document.getElementById('total-payment').value = comma(parseInt(amountWithoutBns));
195
+ document.getElementById('total_interest').value = comma(parseInt(totalInterest));
196
+ // showyears.value = years;
197
+ // showinterest.value = interest / 100;
198
+ // showdiffrence.value = comma(parseInt(difference));
199
+ cb_num.value = cbTimes;
200
+ cb_input.value = comma(parseInt(cb_amount));
201
+ cb_everypayment.value = comma(parseInt(cbEveryPayment));
202
+ }
203
+
204
+ /**
205
+ * yaersコンボボックス関連ENUM
206
+ */
207
+ var yearsEnum = {
208
+ "1": {
209
+ valueInt: 1,
210
+ interest: 1.5
211
+ },
212
+ "2": {
213
+ valueInt: 2,
214
+ interest: 2.5
215
+ },
216
+ }
217
+
218
+ /**
219
+ * 金額をカンマ編集する
220
+ * @param num 金額
221
+ * @return カンマ編集後の金額
222
+ */
223
+ function comma(num) {
224
+ return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
225
+ }
226
+
227
+ /*
228
+ * エラーハンドラ
229
+ */
230
+
231
+ // Error message
232
+ function showError(error){
233
+ console.log("Error");
234
+
235
+ // create a div
236
+ const errorDiv = document.createElement("div");
237
+
238
+ // get element
239
+ const card = document.querySelector(".card");
240
+ const heading = document.querySelector(".heading");
241
+
242
+ // add class
243
+ errorDiv.className = "alert alert-danger";
244
+
245
+ // create text node and append div
246
+ errorDiv.appendChild(document.createTextNode(error));
247
+
248
+ // Insert error above heading
249
+ card.insertBefore(errorDiv, heading);
250
+
251
+ // clear error after 3 secs.
252
+ setTimeout(clearError, 3000);
253
+ }
254
+
255
+ // clear error function
256
+ function clearError() {
257
+ document.querySelector(".alert").remove();
258
+ }
259
+
260
+ function onCheckValueError(message) {
261
+ showError(message);
262
+ console.log("Error");
263
+ }
264
+ ```
265
+
266
+ またわからない箇所があればコメントください。

1

if文内修正

2020/07/23 11:54

投稿

退会済みユーザー
answer CHANGED
@@ -21,16 +21,16 @@
21
21
  * 計算前チェック処理
22
22
  */
23
23
  var checkValue = function() {
24
- if (document.getElementsByName("amount")) {
24
+ if (!document.getElementsByName("amount")) {
25
25
  // ここにアラート等を入れる
26
26
  return false;
27
- } else if (document.getElementsByName("downpayment")) {
27
+ } else if (!document.getElementsByName("downpayment")) {
28
28
  // ここにアラート等を入れる
29
29
  return false;
30
- } else if (document.getElementsByName("cb_amount")) {
30
+ } else if (!document.getElementsByName("cb_amount")) {
31
31
  // ここにアラート等を入れる
32
32
  return false;
33
- } else if (document.loanform.years.value) {
33
+ } else if (!document.loanform.years.value) {
34
34
  // ここにアラート等を入れる
35
35
  return false;
36
36
  }
@@ -52,16 +52,16 @@
52
52
  var cb_amount = document.getElementsByName("cb_amount");
53
53
  var years = document.loanform.years.value;
54
54
 
55
- if (amount) {
55
+ if (!amount) {
56
56
  // ここにアラート等を入れる
57
57
  return false;
58
- } else if (downpayment) {
58
+ } else if (!downpayment) {
59
59
  // ここにアラート等を入れる
60
60
  return false;
61
- } else if (cb_amount) {
61
+ } else if (!cb_amount) {
62
62
  // ここにアラート等を入れる
63
63
  return false;
64
- } else if (years) {
64
+ } else if (!years) {
65
65
  // ここにアラート等を入れる
66
66
  return false;
67
67
  }