売上・入力管理アプリ

今月の売上と入力を管理しましょう。
日付	売上	入力	備考
1日
<!DOCTYPE html>
<html>
<head>
	<title>売上・入力管理アプリ</title>
	<meta charset="UTF-8">
</head>
<body>
<h1>売上・入力管理アプリ</h1>
<p>今月の売上と入力を管理しましょう。</p>

<table>
	<tr>
		<th>日付</th>
		<th>売上</th>
		<th>入力</th>
		<th>備考</th>
	</tr>
	<tr>
		<td>1日</td>
		<td><input type="number" name="sales_1"></td>
		<td><input type="number" name="input_1"></td>
		<td><input type="text" name="memo_1"></td>
	</tr>
	<!-- 同様に2日〜31日まで記入する -->
	<!-- 省略 -->
</table>

<br>

<button onclick="calculate()">計算する</button>
<button onclick="generateInvoice()">請求書を出す</button>

<div id="result"></div>

<!-- スクリプト -->
<script type="text/javascript">

function calculate() {
	// 売上の合計
	var salesTotal = 0;
	// 入力の合計
	var inputTotal = 0;

	// 入力値からデータを取得
	for (var i = 1; i <= 31; i++) {
		var sales = parseInt(document.getElementsByName("sales_" + i)[0].value);
		var input = parseInt(document.getElementsByName("input_" + i)[0].value);

		// データが入力されている場合は合計に加える
		if (!isNaN(sales)) {
			salesTotal += sales;
		}
		if (!isNaN(input)) {
			inputTotal += input;
		}
	}

	// 売上と入力の差額を計算
	var difference = salesTotal - inputTotal;

	// 結果を表示
	document.getElementById("result").innerHTML = "今月の売上は" + salesTotal +
												  "円、入力は" + inputTotal +
												  "円、差額は" + difference +
												  "円です。";
}

function generateInvoice() {
	// データの検証
	var isValid = true;
	for (var i = 1; i <= 31; i++) {
		// 売上が入力されているか
		var sales = document.getElementsByName("sales_" + i)[0].value;
		if (isNaN(parseInt(sales))) {
			isValid = false;
		}

		// 入力が入力されているか
		var input = document.getElementsByName("input_" + i)[0].value;
		if (isNaN(parseInt(input))) {
			isValid = false;
		}
	}

	// 結果の表示
	if (isValid) {
		document.getElementById("result").innerHTML = "請求書を出力しました。";
		alert("請求書を送付しました。");
	} else {
		document.getElementById("result").innerHTML = "入力エラーがあります。";
	}
}

</script>

</body>
</html>