teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問JavaScriptでリアルタイム計算で入力値のチェックについて教えてください。

編集履歴

回答編集履歴

3

修正

2020/07/26 03:04

投稿

退会済みユーザー
test CHANGED
@@ -1,531 +1,359 @@
1
+ 2020/7/26 修正
2
+
3
+
4
+
1
- 計算処理は上手くいくとのことですので、その部分は省略します。
5
+ 文字数オーバーだったので、書き直してます。
2
-
3
-
4
-
6
+
5
- 修正案として、
7
+ ソース修正しました。
6
-
8
+
9
+
10
+
7
- ・チェックがOKだったら、setTimeout(calculateResults, 100);を実行する
11
+ まずyearsのセレクトボックスについて文字列も混在とのことですが、自分のソースのyearsEnumの値を対応するものに変えて頂ければ対応可能です。
12
+
13
+
14
+
8
-
15
+ ```
16
+
17
+ /**
18
+
9
- ・calculateResultsの中でチェックを行う
19
+ * yaersコンボボックス要素
10
-
20
+
11
- があります。
21
+ */
22
+
12
-
23
+ var yearsEnum = {
24
+
13
-
25
+ "1": {
14
-
26
+
15
- 以下修正サンプルです。
27
+ valueInt: 1,
16
-
17
-
18
-
28
+
19
- ```JavaScript
29
+ interest: 1.5
30
+
31
+ },
32
+
33
+ "2": {
34
+
35
+ valueInt: 2,
36
+
37
+ interest: 2.5
38
+
39
+ },
40
+
41
+ }
42
+
43
+
44
+
45
+ // サブミットイベント
20
46
 
21
47
  document.loanform.addEventListener('submit', function(e) {
22
48
 
49
+
50
+
51
+ // 入力チェック通過後、calculateResultsを実行する
52
+
53
+ if (checkValue()) {
54
+
55
+ // 活性制御
56
+
23
- document.getElementById('results').style.display = 'none';
57
+ document.getElementById('results').style.display = 'none';
24
-
58
+
25
- document.getElementById('loading').style.display = 'block';
59
+ document.getElementById('loading').style.display = 'block';
26
-
60
+
61
+
62
+
27
- if (checkValue()) {
63
+ // calculateResults実行
28
-
64
+
29
- setTimeout(calculateResults, 100);
65
+ setTimeout(calculateResults, 3500);
30
-
66
+
31
- }
67
+ }
32
-
68
+
33
- e.preventDefault();
69
+ e.preventDefault();
34
70
 
35
71
  });
36
72
 
37
73
 
38
74
 
75
+ /**
76
+
77
+ * 計算前チェック処理
78
+
79
+ * @return チェックOK：true, チェックNG：false
80
+
81
+ */
82
+
83
+ function checkValue() {
84
+
85
+ let rtn = true; // 返却用
86
+
87
+
88
+
89
+ let downpayment = document.getElementsByName('downpayment')[0].value; // 頭金
90
+
91
+ let amount = document.getElementsByName('amount')[0].value; // 製品料金
92
+
93
+ let cb_amount = document.getElementsByName('cb_amount')[0].value; // ボーナス支払い金額
94
+
95
+ let selectedYears = document.loanform.years.value; // years
96
+
97
+
98
+
99
+ // 必須チェック
100
+
101
+ if (!amount) {
102
+
103
+
104
+
105
+ // amountが未設定の場合エラー
106
+
107
+ showError("Please check amount");
108
+
109
+ rtn = false;
110
+
111
+
112
+
113
+ } else if (!downpayment) {
114
+
115
+
116
+
117
+ // downpaymentが未設定の場合エラー
118
+
119
+ showError("Please check downpayment.");
120
+
121
+ rtn = false;
122
+
123
+
124
+
125
+ } else if (!cb_amount) {
126
+
127
+
128
+
129
+ // cb_amountが未設定の場合エラー
130
+
131
+ showError("Please check cb_amount.");
132
+
133
+ rtn = false;
134
+
135
+
136
+
137
+ } else if (!selectedYears) {
138
+
139
+
140
+
141
+ // yearsが未選択の場合エラー
142
+
143
+ showError("Please check selectbox of years.");
144
+
145
+ rtn = false;
146
+
147
+
148
+
149
+ }
150
+
151
+
152
+
153
+ // 必須チェックがtrueの場合、相関チェックを行う
154
+
155
+ if (rtn) {
156
+
157
+
158
+
159
+ if (cb_amount >= ( amount - downpayment ) / 2 ) {
160
+
161
+
162
+
163
+ // ボーナス併用払い金額 >= 商品代金と頭金の差額 / 2の場合エラー
164
+
165
+ showError("Please check cb_amount ");
166
+
167
+ rtn = false;
168
+
169
+ }
170
+
171
+ }
172
+
173
+
174
+
175
+ // チェック通過
176
+
177
+ return rtn;
178
+
179
+ }
180
+
181
+
182
+
183
+ /**
184
+
185
+ * 金利の算出
186
+
187
+ */
188
+
189
+ function calculateResults(e) {
190
+
191
+ let downpayment = document.getElementsByName('downpayment')[0].value; // 頭金
192
+
193
+ let amount = document.getElementsByName('amount')[0].value; // 製品料金
194
+
195
+ let cb_amount = document.getElementsByName('cb_amount')[0].value; // ボーナス支払い金額
196
+
197
+ let years, interest;
198
+
199
+
200
+
201
+ // yearsコンボボックス内選択値に応じて、years, interestをENUMから設定
202
+
203
+ let selectedYears = document.loanform.years.value;
204
+
205
+ years = yearsEnum[selectedYears].valueInt;
206
+
207
+ interest = yearsEnum[selectedYears].interest;
208
+
209
+
210
+
211
+ // 算出
212
+
213
+ console.log('Calculating...');
214
+
215
+ console.log('downpayment = ' + downpayment);
216
+
217
+ console.log('amount = ' + amount);
218
+
219
+ console.log('cb_amount = ' + cb_amount);
220
+
221
+
222
+
223
+
224
+
225
+ const difference = amount - downpayment; // 商品代金と頭金の差額
226
+
227
+ const cbTimes = years * 2; // ボーナス支払いの回数
228
+
229
+ const cbEveryPayment = cb_amount / cbTimes; // ボーナス一回あたりに支払う金額
230
+
231
+ const paymentTimes = years * 12; // 支払い回数(ボーナス除く)
232
+
233
+ const interestMod = 1 + (interest / 100); // 手を加えた金利を算出
234
+
235
+ // const amountWithoutBns = difference * interestMod;
236
+
237
+ const totalPayment = (difference - cb_amount) * interestMod; // ボーナス支払い以外の支払金額を算出
238
+
239
+ const justDevideMonthlyPayment = totalPayment / paymentTimes; // ひと月辺りの支払額を一度算出
240
+
241
+ const secondToLastMonthlyPayment = (Math.floor(justDevideMonthlyPayment / 100) * 100); // 10円単位の切り捨て
242
+
243
+ const firstMonthlyPayment = totalPayment - (secondToLastMonthlyPayment * (paymentTimes - 1)); // 切り捨て額を1ヶ月目の支払額に集約
244
+
245
+ const totalInterest = (difference * interestMod) - difference; // 商品にかかる金利
246
+
247
+
248
+
249
+
250
+
251
+ // 各項目にセット
252
+
253
+ document.getElementById('monthly-payment1').value = comma(parseInt(firstMonthlyPayment));
254
+
255
+ document.getElementById('monthly-payment2').value = comma(parseInt(secondToLastMonthlyPayment));
256
+
257
+ document.getElementById('total-payment').value = comma(parseInt(interestMod));
258
+
259
+ document.getElementById('total_interest').value = comma(parseInt(totalInterest));
260
+
261
+ document.getElementById('showyears').value = years;
262
+
263
+ document.getElementById('showinterest').value = interest / 100;
264
+
265
+ document.getElementById('showdiffrence').value = comma(parseInt(difference));
266
+
267
+ document.getElementById('cb_num').value = cbTimes;
268
+
269
+ document.getElementById('cb_input').value = comma(parseInt(cb_amount));
270
+
271
+ document.getElementById('cb_everypayment').value = comma(parseInt(cbEveryPayment));
272
+
273
+ }
274
+
275
+
276
+
277
+ /**
278
+
279
+ * 金額をカンマ編集する
280
+
281
+ * @param num 金額
282
+
283
+ * @return カンマ編集後の金額
284
+
285
+ */
286
+
287
+ function comma(num) {
288
+
289
+ return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
290
+
291
+ }
292
+
293
+
294
+
39
295
  /*
40
296
 
41
- * 計算前チェック処理
297
+ * エラーハンドラ
42
-
298
+
43
- */
299
+ */
300
+
301
+
302
+
44
-
303
+ // Error message
304
+
45
- var checkValue = function() {
305
+ function showError(error){
46
-
306
+
47
- if (!document.getElementsByName("amount")) {
307
+ console.log("Error ..." + error);
48
-
308
+
309
+
310
+
49
- // ここにアラート等を入れる
311
+ // create a div
50
-
51
- return false;
312
+
52
-
53
- } else if (!document.getElementsByName("downpayment")) {
313
+ const errorDiv = document.createElement("div");
54
-
314
+
315
+
316
+
55
- // ここにアラート等を入れる
317
+ // get element
56
-
318
+
57
- return false;
319
+ const card = document.querySelector(".card");
58
-
320
+
59
- } else if (!document.getElementsByName("cb_amount")) {
321
+ const heading = document.querySelector(".heading");
60
-
322
+
323
+
324
+
61
- // ここにアラート等を入れる
325
+ // add class
326
+
62
-
327
+ errorDiv.className = "alert alert-danger";
328
+
329
+
330
+
63
- return false;
331
+ // create text node and append div
64
-
332
+
65
- } else if (!document.loanform.years.value) {
333
+ errorDiv.appendChild(document.createTextNode(error));
334
+
335
+
336
+
66
-
337
+ // Insert error above heading
338
+
339
+ card.insertBefore(errorDiv, heading);
340
+
341
+
342
+
67
- // ここにアラート等を入れる
343
+ // clear error after 3 secs.
68
-
344
+
69
- return false;
345
+ setTimeout(clearError, 3000);
70
-
346
+
71
- }
347
+ }
348
+
349
+
350
+
72
-
351
+ // clear error function
352
+
73
- return true;
353
+ function clearError() {
354
+
355
+ document.querySelector(".alert").remove();
74
356
 
75
357
  }
76
358
 
77
359
  ```
78
-
79
-
80
-
81
- チェック処理内にてbooleanを返して、setTimeoutを行うか判定してます。
82
-
83
- checkValue()内はいくらでも改良可能なので、他の必須チェックや相関チェックなどがあればここに入れます。
84
-
85
- 今回は直書きしてますが、
86
-
87
-
88
-
89
- ```JavaScript
90
-
91
- /*
92
-
93
- * 計算前チェック処理
94
-
95
- */
96
-
97
- var checkValue = function() {
98
-
99
- var amount = document.getElementsByName("amount");
100
-
101
- var downpayment = document.getElementsByName("downpayment");
102
-
103
- var cb_amount = document.getElementsByName("cb_amount");
104
-
105
- var years = document.loanform.years.value;
106
-
107
-
108
-
109
- if (!amount) {
110
-
111
- // ここにアラート等を入れる
112
-
113
- return false;
114
-
115
- } else if (!downpayment) {
116
-
117
- // ここにアラート等を入れる
118
-
119
- return false;
120
-
121
- } else if (!cb_amount) {
122
-
123
- // ここにアラート等を入れる
124
-
125
- return false;
126
-
127
- } else if (!years) {
128
-
129
- // ここにアラート等を入れる
130
-
131
- return false;
132
-
133
- }
134
-
135
- return true;
136
-
137
- }
138
-
139
-
140
-
141
- ```
142
-
143
-
144
-
145
- みたいにすると、相関チェックなどの他のチェックの際に変数を使い回せます。
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
- 2020/7/23 20:44 追記
154
-
155
-
156
-
157
- コードレビューのようになってしまいましたが(そんなのできるような人間ではありませんが)
158
-
159
- ソースを全体的に修正しました。
160
-
161
- インデントをタブで行っていることについてはご容赦ください。
162
-
163
-
164
-
165
- まず全体的に見やすいようにコメントを追加しました。
166
-
167
- コメントに関して質問者様は英語で記載されておりますが、海外の方にソースを見てもらうことがない限りは日本語がいいです。
168
-
169
- コメントは、「自分がソースを見たときにわかりやすい」「他の人が後に改修する際にわかりやすい」というのが大事です。
170
-
171
- 実際私がコメントを表記する際に、わからなかった箇所が多いです。計算部分についてはいまだに分からなかったので、コメントは記述してません。
172
-
173
- （cb_amountとコメントしている箇所についても、「借入金」だったり「年間金利発生回数」だったり記述すしたほうがいいです。）
174
-
175
-
176
-
177
- 以下コードです。(なるべく元のコードを残そうとしてはいますが、全体的な修正になってます。)
178
-
179
-
180
-
181
- ```JavaScript
182
-
183
-
184
-
185
- // サブミットイベント
186
-
187
- document.loanform.addEventListener('submit', function(e) {
188
-
189
-
190
-
191
- // 入力チェック通過後、calculateResultsを実行する
192
-
193
- if (checkValue()) {
194
-
195
- // 活性制御
196
-
197
- document.getElementById('results').style.display = 'none';
198
-
199
- document.getElementById('loading').style.display = 'block';
200
-
201
-
202
-
203
- // calculateResults実行
204
-
205
- setTimeout(calculateResults, 3500);
206
-
207
- }
208
-
209
- e.preventDefault();
210
-
211
- });
212
-
213
-
214
-
215
- /**
216
-
217
- * 計算前チェック処理
218
-
219
- * @return チェックOK：true, チェックNG：false
220
-
221
- */
222
-
223
- function checkValue() {
224
-
225
- let rtn = true; // 返却用
226
-
227
-
228
-
229
- let downpayment = document.getElementsByName("downpayment")[0].value; // downpayment
230
-
231
- let amount = document.getElementsByName("amount")[0].value; // amount
232
-
233
- let cb_amount = document.getElementsByName("cb_amount")[0].value; // cb_amount
234
-
235
- let selectedYears = document.loanform.years.value; // years
236
-
237
-
238
-
239
- // 必須チェック
240
-
241
- if (!amount) {
242
-
243
-
244
-
245
- // amountが未設定の場合エラー
246
-
247
- showError("Please check amount");
248
-
249
- rtn = false;
250
-
251
-
252
-
253
- } else if (!downpayment) {
254
-
255
-
256
-
257
- // downpaymentが未設定の場合エラー
258
-
259
- showError("Please check downpayment.");
260
-
261
- rtn = false;
262
-
263
-
264
-
265
- } else if (!cb_amount) {
266
-
267
-
268
-
269
- // cb_amountが未設定の場合エラー
270
-
271
- showError("Please check cb_amount.");
272
-
273
- rtn = false;
274
-
275
-
276
-
277
- } else if (!selectedYears) {
278
-
279
-
280
-
281
- // yearsが未選択の場合エラー
282
-
283
- showError("Please check selectbox of years.");
284
-
285
- rtn = false;
286
-
287
-
288
-
289
- }
290
-
291
-
292
-
293
- // 必須チェックがtrueの場合、相関チェックを行う
294
-
295
- if (rtn) {
296
-
297
- if (cb_amount <= ( amount - downpayment ) / 2 ) {
298
-
299
- showError("Please check cb_amount ");
300
-
301
- }
302
-
303
- }
304
-
305
-
306
-
307
- // チェック通過
308
-
309
- return rtn;
310
-
311
- }
312
-
313
-
314
-
315
- /**
316
-
317
- * 金利の算出
318
-
319
- */
320
-
321
- function calculateResults(e) {
322
-
323
- let downpayment = document.getElementsByName("downpayment")[0].value; // downpayment
324
-
325
- let amount = document.getElementsByName("amount")[0].value; // amount
326
-
327
- let cb_amount = document.getElementsByName("cb_amount")[0].value; // cb_amount
328
-
329
- let years, interest;
330
-
331
-
332
-
333
- // yearsコンボボックス内選択値に応じて、years, interestをENUMから設定
334
-
335
- let selectedYears = document.loanform.years.value;
336
-
337
- years = yearsEnum[selectedYears].valueInt;
338
-
339
- interest = yearsEnum[selectedYears].interest;
340
-
341
-
342
-
343
- // 算出
344
-
345
- console.log('Calculating...');
346
-
347
- console.log('downpayment = ' + downpayment);
348
-
349
- console.log('amount = ' + amount);
350
-
351
- console.log('cb_amount = ' + cb_amount);
352
-
353
-
354
-
355
- const difference = amount - downpayment;
356
-
357
- const cbTimes= years * 2;
358
-
359
- const cbEveryPayment = cb_amount / cbTimes;
360
-
361
- const paymentTimes = years * 12;
362
-
363
- const interestMod = 1 + (interest / 100);
364
-
365
- const amountWithoutBns = difference * interestMod;
366
-
367
- const totalPayment = (difference - cb_amount) * interestMod;
368
-
369
- const justDevideMonthlyPayment = totalPayment / paymentTimes;
370
-
371
- const secondToLastMonthlyPayment = (Math.floor(justDevideMonthlyPayment / 100) * 100);
372
-
373
- const firstMonthlyPayment = totalPayment - (secondToLastMonthlyPayment * (paymentTimes - 1));
374
-
375
- const totalInterest = (difference * interestMod) - difference;
376
-
377
-
378
-
379
-
380
-
381
- // 各項目にセット
382
-
383
- document.getElementById('monthly-payment1').value = comma(parseInt(firstMonthlyPayment));
384
-
385
- document.getElementById('monthly-payment2').value = comma(parseInt(secondToLastMonthlyPayment));
386
-
387
- document.getElementById('total-payment').value = comma(parseInt(amountWithoutBns));
388
-
389
- document.getElementById('total_interest').value = comma(parseInt(totalInterest));
390
-
391
- // showyears.value = years;
392
-
393
- // showinterest.value = interest / 100;
394
-
395
- // showdiffrence.value = comma(parseInt(difference));
396
-
397
- cb_num.value = cbTimes;
398
-
399
- cb_input.value = comma(parseInt(cb_amount));
400
-
401
- cb_everypayment.value = comma(parseInt(cbEveryPayment));
402
-
403
- }
404
-
405
-
406
-
407
- /**
408
-
409
- * yaersコンボボックス関連ENUM
410
-
411
- */
412
-
413
- var yearsEnum = {
414
-
415
- "1": {
416
-
417
- valueInt: 1,
418
-
419
- interest: 1.5
420
-
421
- },
422
-
423
- "2": {
424
-
425
- valueInt: 2,
426
-
427
- interest: 2.5
428
-
429
- },
430
-
431
- }
432
-
433
-
434
-
435
- /**
436
-
437
- * 金額をカンマ編集する
438
-
439
- * @param num 金額
440
-
441
- * @return カンマ編集後の金額
442
-
443
- */
444
-
445
- function comma(num) {
446
-
447
- return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
448
-
449
- }
450
-
451
-
452
-
453
- /*
454
-
455
- * エラーハンドラ
456
-
457
- */
458
-
459
-
460
-
461
- // Error message
462
-
463
- function showError(error){
464
-
465
- console.log("Error");
466
-
467
-
468
-
469
- // create a div
470
-
471
- const errorDiv = document.createElement("div");
472
-
473
-
474
-
475
- // get element
476
-
477
- const card = document.querySelector(".card");
478
-
479
- const heading = document.querySelector(".heading");
480
-
481
-
482
-
483
- // add class
484
-
485
- errorDiv.className = "alert alert-danger";
486
-
487
-
488
-
489
- // create text node and append div
490
-
491
- errorDiv.appendChild(document.createTextNode(error));
492
-
493
-
494
-
495
- // Insert error above heading
496
-
497
- card.insertBefore(errorDiv, heading);
498
-
499
-
500
-
501
- // clear error after 3 secs.
502
-
503
- setTimeout(clearError, 3000);
504
-
505
- }
506
-
507
-
508
-
509
- // clear error function
510
-
511
- function clearError() {
512
-
513
- document.querySelector(".alert").remove();
514
-
515
- }
516
-
517
-
518
-
519
- function onCheckValueError(message) {
520
-
521
- showError(message);
522
-
523
- console.log("Error");
524
-
525
- }
526
-
527
- ```
528
-
529
-
530
-
531
- またわからない箇所があればコメントください。

2

追記

2020/07/26 03:04

投稿

退会済みユーザー
test CHANGED
@@ -143,3 +143,389 @@
143
143
 
144
144
 
145
145
  みたいにすると、相関チェックなどの他のチェックの際に変数を使い回せます。
146
+
147
+
148
+
149
+
150
+
151
+
152
+
153
+ 2020/7/23 20:44 追記
154
+
155
+
156
+
157
+ コードレビューのようになってしまいましたが(そんなのできるような人間ではありませんが)
158
+
159
+ ソースを全体的に修正しました。
160
+
161
+ インデントをタブで行っていることについてはご容赦ください。
162
+
163
+
164
+
165
+ まず全体的に見やすいようにコメントを追加しました。
166
+
167
+ コメントに関して質問者様は英語で記載されておりますが、海外の方にソースを見てもらうことがない限りは日本語がいいです。
168
+
169
+ コメントは、「自分がソースを見たときにわかりやすい」「他の人が後に改修する際にわかりやすい」というのが大事です。
170
+
171
+ 実際私がコメントを表記する際に、わからなかった箇所が多いです。計算部分についてはいまだに分からなかったので、コメントは記述してません。
172
+
173
+ （cb_amountとコメントしている箇所についても、「借入金」だったり「年間金利発生回数」だったり記述すしたほうがいいです。）
174
+
175
+
176
+
177
+ 以下コードです。(なるべく元のコードを残そうとしてはいますが、全体的な修正になってます。)
178
+
179
+
180
+
181
+ ```JavaScript
182
+
183
+
184
+
185
+ // サブミットイベント
186
+
187
+ document.loanform.addEventListener('submit', function(e) {
188
+
189
+
190
+
191
+ // 入力チェック通過後、calculateResultsを実行する
192
+
193
+ if (checkValue()) {
194
+
195
+ // 活性制御
196
+
197
+ document.getElementById('results').style.display = 'none';
198
+
199
+ document.getElementById('loading').style.display = 'block';
200
+
201
+
202
+
203
+ // calculateResults実行
204
+
205
+ setTimeout(calculateResults, 3500);
206
+
207
+ }
208
+
209
+ e.preventDefault();
210
+
211
+ });
212
+
213
+
214
+
215
+ /**
216
+
217
+ * 計算前チェック処理
218
+
219
+ * @return チェックOK：true, チェックNG：false
220
+
221
+ */
222
+
223
+ function checkValue() {
224
+
225
+ let rtn = true; // 返却用
226
+
227
+
228
+
229
+ let downpayment = document.getElementsByName("downpayment")[0].value; // downpayment
230
+
231
+ let amount = document.getElementsByName("amount")[0].value; // amount
232
+
233
+ let cb_amount = document.getElementsByName("cb_amount")[0].value; // cb_amount
234
+
235
+ let selectedYears = document.loanform.years.value; // years
236
+
237
+
238
+
239
+ // 必須チェック
240
+
241
+ if (!amount) {
242
+
243
+
244
+
245
+ // amountが未設定の場合エラー
246
+
247
+ showError("Please check amount");
248
+
249
+ rtn = false;
250
+
251
+
252
+
253
+ } else if (!downpayment) {
254
+
255
+
256
+
257
+ // downpaymentが未設定の場合エラー
258
+
259
+ showError("Please check downpayment.");
260
+
261
+ rtn = false;
262
+
263
+
264
+
265
+ } else if (!cb_amount) {
266
+
267
+
268
+
269
+ // cb_amountが未設定の場合エラー
270
+
271
+ showError("Please check cb_amount.");
272
+
273
+ rtn = false;
274
+
275
+
276
+
277
+ } else if (!selectedYears) {
278
+
279
+
280
+
281
+ // yearsが未選択の場合エラー
282
+
283
+ showError("Please check selectbox of years.");
284
+
285
+ rtn = false;
286
+
287
+
288
+
289
+ }
290
+
291
+
292
+
293
+ // 必須チェックがtrueの場合、相関チェックを行う
294
+
295
+ if (rtn) {
296
+
297
+ if (cb_amount <= ( amount - downpayment ) / 2 ) {
298
+
299
+ showError("Please check cb_amount ");
300
+
301
+ }
302
+
303
+ }
304
+
305
+
306
+
307
+ // チェック通過
308
+
309
+ return rtn;
310
+
311
+ }
312
+
313
+
314
+
315
+ /**
316
+
317
+ * 金利の算出
318
+
319
+ */
320
+
321
+ function calculateResults(e) {
322
+
323
+ let downpayment = document.getElementsByName("downpayment")[0].value; // downpayment
324
+
325
+ let amount = document.getElementsByName("amount")[0].value; // amount
326
+
327
+ let cb_amount = document.getElementsByName("cb_amount")[0].value; // cb_amount
328
+
329
+ let years, interest;
330
+
331
+
332
+
333
+ // yearsコンボボックス内選択値に応じて、years, interestをENUMから設定
334
+
335
+ let selectedYears = document.loanform.years.value;
336
+
337
+ years = yearsEnum[selectedYears].valueInt;
338
+
339
+ interest = yearsEnum[selectedYears].interest;
340
+
341
+
342
+
343
+ // 算出
344
+
345
+ console.log('Calculating...');
346
+
347
+ console.log('downpayment = ' + downpayment);
348
+
349
+ console.log('amount = ' + amount);
350
+
351
+ console.log('cb_amount = ' + cb_amount);
352
+
353
+
354
+
355
+ const difference = amount - downpayment;
356
+
357
+ const cbTimes= years * 2;
358
+
359
+ const cbEveryPayment = cb_amount / cbTimes;
360
+
361
+ const paymentTimes = years * 12;
362
+
363
+ const interestMod = 1 + (interest / 100);
364
+
365
+ const amountWithoutBns = difference * interestMod;
366
+
367
+ const totalPayment = (difference - cb_amount) * interestMod;
368
+
369
+ const justDevideMonthlyPayment = totalPayment / paymentTimes;
370
+
371
+ const secondToLastMonthlyPayment = (Math.floor(justDevideMonthlyPayment / 100) * 100);
372
+
373
+ const firstMonthlyPayment = totalPayment - (secondToLastMonthlyPayment * (paymentTimes - 1));
374
+
375
+ const totalInterest = (difference * interestMod) - difference;
376
+
377
+
378
+
379
+
380
+
381
+ // 各項目にセット
382
+
383
+ document.getElementById('monthly-payment1').value = comma(parseInt(firstMonthlyPayment));
384
+
385
+ document.getElementById('monthly-payment2').value = comma(parseInt(secondToLastMonthlyPayment));
386
+
387
+ document.getElementById('total-payment').value = comma(parseInt(amountWithoutBns));
388
+
389
+ document.getElementById('total_interest').value = comma(parseInt(totalInterest));
390
+
391
+ // showyears.value = years;
392
+
393
+ // showinterest.value = interest / 100;
394
+
395
+ // showdiffrence.value = comma(parseInt(difference));
396
+
397
+ cb_num.value = cbTimes;
398
+
399
+ cb_input.value = comma(parseInt(cb_amount));
400
+
401
+ cb_everypayment.value = comma(parseInt(cbEveryPayment));
402
+
403
+ }
404
+
405
+
406
+
407
+ /**
408
+
409
+ * yaersコンボボックス関連ENUM
410
+
411
+ */
412
+
413
+ var yearsEnum = {
414
+
415
+ "1": {
416
+
417
+ valueInt: 1,
418
+
419
+ interest: 1.5
420
+
421
+ },
422
+
423
+ "2": {
424
+
425
+ valueInt: 2,
426
+
427
+ interest: 2.5
428
+
429
+ },
430
+
431
+ }
432
+
433
+
434
+
435
+ /**
436
+
437
+ * 金額をカンマ編集する
438
+
439
+ * @param num 金額
440
+
441
+ * @return カンマ編集後の金額
442
+
443
+ */
444
+
445
+ function comma(num) {
446
+
447
+ return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
448
+
449
+ }
450
+
451
+
452
+
453
+ /*
454
+
455
+ * エラーハンドラ
456
+
457
+ */
458
+
459
+
460
+
461
+ // Error message
462
+
463
+ function showError(error){
464
+
465
+ console.log("Error");
466
+
467
+
468
+
469
+ // create a div
470
+
471
+ const errorDiv = document.createElement("div");
472
+
473
+
474
+
475
+ // get element
476
+
477
+ const card = document.querySelector(".card");
478
+
479
+ const heading = document.querySelector(".heading");
480
+
481
+
482
+
483
+ // add class
484
+
485
+ errorDiv.className = "alert alert-danger";
486
+
487
+
488
+
489
+ // create text node and append div
490
+
491
+ errorDiv.appendChild(document.createTextNode(error));
492
+
493
+
494
+
495
+ // Insert error above heading
496
+
497
+ card.insertBefore(errorDiv, heading);
498
+
499
+
500
+
501
+ // clear error after 3 secs.
502
+
503
+ setTimeout(clearError, 3000);
504
+
505
+ }
506
+
507
+
508
+
509
+ // clear error function
510
+
511
+ function clearError() {
512
+
513
+ document.querySelector(".alert").remove();
514
+
515
+ }
516
+
517
+
518
+
519
+ function onCheckValueError(message) {
520
+
521
+ showError(message);
522
+
523
+ console.log("Error");
524
+
525
+ }
526
+
527
+ ```
528
+
529
+
530
+
531
+ またわからない箇所があればコメントください。

1

if文内修正

2020/07/23 11:54

投稿

退会済みユーザー
test CHANGED
@@ -44,25 +44,25 @@
44
44
 
45
45
  var checkValue = function() {
46
46
 
47
- if (document.getElementsByName("amount")) {
47
+ if (!document.getElementsByName("amount")) {
48
48
 
49
49
  // ここにアラート等を入れる
50
50
 
51
51
  return false;
52
52
 
53
- } else if (document.getElementsByName("downpayment")) {
53
+ } else if (!document.getElementsByName("downpayment")) {
54
54
 
55
55
  // ここにアラート等を入れる
56
56
 
57
57
  return false;
58
58
 
59
- } else if (document.getElementsByName("cb_amount")) {
59
+ } else if (!document.getElementsByName("cb_amount")) {
60
60
 
61
61
  // ここにアラート等を入れる
62
62
 
63
63
  return false;
64
64
 
65
- } else if (document.loanform.years.value) {
65
+ } else if (!document.loanform.years.value) {
66
66
 
67
67
  // ここにアラート等を入れる
68
68
 
@@ -106,25 +106,25 @@
106
106
 
107
107
 
108
108
 
109
- if (amount) {
109
+ if (!amount) {
110
110
 
111
111
  // ここにアラート等を入れる
112
112
 
113
113
  return false;
114
114
 
115
- } else if (downpayment) {
115
+ } else if (!downpayment) {
116
116
 
117
117
  // ここにアラート等を入れる
118
118
 
119
119
  return false;
120
120
 
121
- } else if (cb_amount) {
121
+ } else if (!cb_amount) {
122
122
 
123
123
  // ここにアラート等を入れる
124
124
 
125
125
  return false;
126
126
 
127
- } else if (years) {
127
+ } else if (!years) {
128
128
 
129
129
  // ここにアラート等を入れる
130
130