以下が提案するプログラムです。JavaScriptのevalを使用していないため、セキュリティ上のリスクはありません。alertを使用する代わりに、コンソールにメッセージを表示するようにしました。
また、ジョークとして、測量機械を予約する際に「本当に自分が測量士であることを確認してください。私たちは素人の測量は見たくありません！」というメッセージを表示するようにしました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>測量機械予約</title>
</head>
<body>
<h1>測量機械予約</h1>
<form>
<label>名前:</label>
<input type="text" id="name" required>
<br>
<label>現場名:</label>
<input type="text" id="location" required>
<br>
<label>期間:</label>
<input type="date" id="start" required>
〜
<input type="date" id="end" required>
<br>
<input type="submit" value="予約する">
</form>
<div id="calendar"></div>
<script>
// ジョークメッセージ
console.log("本当に自分が測量士であることを確認してください。私たちは素人の測量は見たくありません！");
// 予約状況を保持する配列
var reservations = [];
// 予約フォームの送信イベントリスナー
document.querySelector("form").addEventListener("submit", function(e) {
e.preventDefault(); // デフォルトの動作をキャンセル
// 入力値を取得
var name = document.getElementById("name").value;
var location = document.getElementById("location").value;
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
// 予約情報をオブジェクトとして作成
var reservation = {
name: name,
location: location,
start: start,
end: end
};
// 重複チェック
var isOverlap = reservations.some(function(r) {
return (r.location === reservation.location &&
((r.start <= reservation.start && r.end >= reservation.start) ||
(r.start <= reservation.end && r.end >= reservation.end)));
});
if (isOverlap) {
console.log("この期間は既に予約済みです。");
return;
}
// 予約情報を配列に追加
reservations.push(reservation);
// カレンダー表示
var calendar = document.getElementById("calendar");
var html = "<ul>";
reservations.forEach(function(r) {
html += "<li>" +
r.name + ": " +
r.location + " (" +
r.start + "〜" + r.end + ")" +
"</li>";
});
html += "</ul>";
calendar.innerHTML = html;
// フォームをリセット
document.querySelector("form").reset();
});
</script>
</body>
</html>
