回答編集履歴

追加

2020/07/26 05:21

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -42,323 +42,465 @@
-```HTML
-<!doctype html>
-<html lang="ja">
-<head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
-    <title></title>
-    <style>
-        #loading, #results {
-            display:none;
-        }
-    </style>
-</head>
-<body class="bg-dark">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-6 mx-auto">
-                <div class="card card-body text-center mt-5">
-                    <h6 class="heading display-5 pb-3">loan calc</h6>
-                   <form name="loanform">
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">amount</span>
-                                <input class="form-control t_rlt" id="amount" name="amount" placeholder="amount">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">downpayment</span>
-                                <input class="form-control t_rlt" id="downpayment" name="downpayment" placeholder="downpayment">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">combind bonus</span>
-                                <input class="form-control t_rlt" id="cb_amount" name="cb_amount" placeholder="combind bonus">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <select class="form-control" name="years" id="years">
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <input type="submit" value="submit" class="btn btn-dark btn-block">
-                        </div>
-                    </form>
-                    <div id="loading">
-                        <img src="img/loading.gif" alt="Loading">
-                    </div>
-                    <div id="results" class="pt-4">
-                        <h5>result</h5>
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">Years </span>
-                                <input class="form-control t_rlt" id="showyears" disabled>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">Interest</span>
-                                <input class="form-control t_rlt" id="showinterest" disabled>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">monthly payment</span>
-                                <input class="form-control t_rlt" id="monthly-payment2" disabled>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">Fist month payment</span>
-                                <input class="form-control t_rlt" id="monthly-payment1" disabled>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">Combined bonus</span>
-                                <input class="form-control t_rlt" id="cb_input" disabled>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">Combined bonus paying times</span>
-                                <input class="form-control t_rlt" id="cb_num" disabled>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">total bonus paying times</span>
-                                <input class="form-control t_rlt" id="cb_everypayment" disabled>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">total - downpayment </span>
-                                <input class="form-control t_rlt" id="showdiffrence" disabled>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">total payment</span>
-                                <input class="form-control t_rlt" id="total-payment" disabled>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">total interest</span>
-                                <input class="form-control t_rlt" id="total_interest" disabled>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
-    <script src="eng.js"></script>
-</body>
-</html>
+```JS
+/**
+ * エレメントの属性値
+ */
+var elementId = {
+	downpayment: "downpayment",			// 頭金
+	amount: "amount",					// 製品料金
+	cb_amount: "cb_amount",				// ボーナス併用払い
+	years: "years"						// yearsコンボボックス
+}
+/**
+ * yearsコンボボックス要素
+ */
+var yearsElement = {
+		blank: {
+			value: "",
+			dispName: "select payment yeart",
+			intValue: 0,
+			interest: 0
+		},
+		aa1: {
+			value: "aa1",
+			dispName: "1 year payment",
+			intValue: 1,
+			interest: 1.5
+		},
+		bb2: {
+			value: "bb2",
+			dispName: "2 year payment",
+			intValue: 2,
+			interest: 2.5
+		}
+}
+/**
+ * DOMLoaded
+ */
+document.addEventListener("DOMContentLoaded", function(e) {
+	// submit
+	document.loanform.addEventListener('submit', function(e) {
+		onSubmit(e);
+	});
+	// yearsコンボボックス要素設定
+	setSelectboxValue(elementId.years, yearsElement);
+}, false)
+/**
+ * サブミットイベント
+ */
+function onSubmit(e) {
+	// 入力チェック通過後、calculateResultsを実行する
+	if (checkValue()) {
+		// 活性制御
+		document.getElementById('results').style.display = 'none';
+		document.getElementById('loading').style.display = 'block';
+		// calculateResults実行
+		setTimeout(calculateResults, 3500);
+	}
+	e.preventDefault();
+}
+/**
+ * セレクトボックス要素設定
+ * @param id セットするセレクトボックスのid
+ * @param object セットするオブジェクト
+ * セットするオブジェクトはkey.valueの形式であること
+ */
+function setSelectboxValue(id, object) {
+	let selectBox = document.getElementById(id);
+	let loopCnt = 1;
+	// 要素数分ループ
+	Object.keys(object).forEach(function(key) {
+		let element = document.createElement("option");
+		element.value = object[key].value;
+		element.innerHTML = object[key].dispName;
+		if (loopCnt == 1) {
+			element.selected = true;
+		}
+		selectBox.appendChild(element);
+		loopCnt++;
+	});
+}
+/**
+ * 計算前チェック処理
+ * @return チェックOK：true, チェックNG：false
+ */
+function checkValue()  {
+	let rtn = true;	// 返却用
+	let downpayment = document.getElementById(elementId.downpayment).value;	// 頭金
+	let amount = document.getElementById(elementId.amount).value;			// 製品料金
+	let cb_amount = document.getElementById(elementId.cb_amount).value;		// ボーナス支払い金額
+	let selectedYears = document.getElementById(elementId.years).value; 	// yearsコンボボックス
+	// 必須チェック
+	if (!amount) {
+		// amountが未設定の場合エラー
+		showError("Please check amount");
+		rtn = false;
+	} else if (!downpayment) {
+		// downpaymentが未設定の場合エラー
+		showError("Please check downpayment.");
+		rtn = false;
+	} else if (!cb_amount) {
+		// cb_amountが未設定の場合エラー
+		showError("Please check cb_amount.");
+		rtn = false;
+	} else if (!selectedYears) {
+		// yearsが未選択の場合エラー
+		showError("Please check selectbox of years.");
+		rtn = false;
+	}
+	// 必須チェックがtrueの場合、相関チェックを行う
+	if (rtn) {
+		if (cb_amount >= ( amount - downpayment ) / 2 ) {
+			// ボーナス併用払い金額 >= 商品代金と頭金の差額 / 2の場合エラー
+			showError("正しい金額を入力してください");
+			rtn = false;
+		}
+	}
+	// チェック通過
+	return rtn;
+}
+/**
+ * 金利の算出
+ */
+function calculateResults(e) {
+	let downpayment = document.getElementById(elementId.downpayment).value;	// 頭金
+	let amount = document.getElementById(elementId.amount).value;			// 製品料金
+	let cb_amount = document.getElementById(elementId.cb_amount).value;		// ボーナス支払い金額
+	let years, interest;
+	// yearsコンボボックス内選択値に応じて、years, interestをENUMから設定
+	let selectedYears = document.getElementById(elementId.years).value; 	// yearsコンボボックス
+	years = yearsElement[selectedYears].intValue;
+	interest = yearsElement[selectedYears].interest;
+	// 算出
+	console.log('Calculating...');
+	console.log('downpayment = ' + downpayment);
+	console.log('amount = ' + amount);
+	console.log('cb_amount = ' + cb_amount);
+	const difference = amount - downpayment; // 商品代金と頭金の差額
+	const cbTimes = years * 2; // ボーナス支払いの回数
+	const cbEveryPayment = cb_amount / cbTimes; // ボーナス一回あたりに支払う金額
+	const paymentTimes = years * 12; // 支払い回数(ボーナス除く)
+	const interestMod = 1 + (interest / 100); // 手を加えた金利を算出
+//	const amountWithoutBns = difference * interestMod;
+	const totalPayment = (difference - cb_amount) * interestMod; // ボーナス支払い以外の支払金額を算出
+	const justDevideMonthlyPayment = totalPayment / paymentTimes; // ひと月辺りの支払額を一度算出
+	const secondToLastMonthlyPayment = (Math.floor(justDevideMonthlyPayment / 100) * 100); // 10円単位の切り捨て
+	const firstMonthlyPayment = totalPayment - (secondToLastMonthlyPayment * (paymentTimes - 1)); // 切り捨て額を1ヶ月目の支払額に集約
+	const totalInterest = (difference * interestMod) - difference; // 商品にかかる金利
+	// 各項目にセット
+	document.getElementById('monthly-payment1').value = comma(parseInt(firstMonthlyPayment));
+	document.getElementById('monthly-payment2').value = comma(parseInt(secondToLastMonthlyPayment));
+	document.getElementById('total-payment').value = comma(parseInt(interestMod));
+	document.getElementById('total_interest').value = comma(parseInt(totalInterest));
+	document.getElementById('showyears').value = years;
+	document.getElementById('showinterest').value = interest / 100;
+	document.getElementById('showdiffrence').value = comma(parseInt(difference));
+	document.getElementById('cb_num').value = cbTimes;
+	document.getElementById('cb_input').value = comma(parseInt(cb_amount));
+	document.getElementById('cb_everypayment').value = comma(parseInt(cbEveryPayment));
+}
+/**
+ * 金額をカンマ編集する
+ * @param num 金額
+ * @return カンマ編集後の金額
+ */
+function comma(num) {
+	return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
+}
+/*
+ * エラーハンドラ
+ */
+// Error message
+function showError(error){
+    console.log("Error ..." + error);
+    // create a div
+    const errorDiv = document.createElement("div");
+    // get element
+    const card = document.querySelector(".card");
+    const heading = document.querySelector(".heading");
+    // add class
+    errorDiv.className = "alert alert-danger";
+    // create text node and append div
+    errorDiv.appendChild(document.createTextNode(error));
+    // Insert error above heading
+    card.insertBefore(errorDiv, heading);
+    // clear error after 3 secs.
+    setTimeout(clearError, 3000);
+}
+// clear error function
+function clearError() {
+    document.querySelector(".alert").remove();
+}
 ```