Go to Qiita Advent Calendar 2024 Top
LoginSignup
jackytom
@jackytom

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

javascriptでエラー

Q&A

JavaScript

php(HTML)で休業日のメンテナンスフォームを作成しています。
そのフォームは10日分入力できるようにしているのですが、同じ日を2か所に入力して送信ボタンをクリックすると、「同じ日が指定されています。」とエラーが出るようにしています。

送信ボタンを連打すると、複数回メッセージが出ないように、一度メッセージを消して再度メッセージを表示させるようにしたいのですが、連打すると、デバッグツールにて下記のエラーが出ます。

Uncaught TypeError: Cannot read properties of null (reading 'remove')
    at HTMLButtonElement.<anonymous> (holiday_mainte.php:221:48)

該当行は、ソースの93行目の

document.getElementById('same1_date_msg').remove();

です。

要はnullのプロパティを削除しようとして発生しているものと思ってますが、デバッグツールで確認したところ、idがsame1_date_msgのメッセージは要素に確かに表示されており、原因が掴めませんでした。

原因究明に協力いただければ幸いです。

ソースコードを添付いたします。
繰り返しになりますが、エラーになったのは93行目です。

<?php ?>
<script>
	document.addEventListener('DOMContentLoaded', function() {
			document.getElementById('button').addEventListener('click', function(){
				//エラーメッセージ
				let closed1Msg = document.getElementById('closed1_msg');
				let closed2Msg = document.getElementById('closed2_msg');
				let closed3Msg = document.getElementById('closed3_msg');
				let closed4Msg = document.getElementById('closed4_msg');
				let closed5Msg = document.getElementById('closed5_msg');
				let closed6Msg = document.getElementById('closed6_msg');
				let closed7Msg = document.getElementById('closed7_msg');
				let closed8Msg = document.getElementById('closed8_msg');
				let closed9Msg = document.getElementById('closed9_msg');
				let closed10Msg = document.getElementById('closed10_msg');
				let same1DateMsg = document.getElementById('same1_date_msg');
				let nullDateMsg = document.getElementById('null_date_msg');
				//エラーメッセージ用親
				let holiday1 = document.getElementById('holiday1');
				let holiday2 = document.getElementById('holiday2');
				let holiday3 = document.getElementById('holiday3');
				let holiday4 = document.getElementById('holiday4');
				let holiday5 = document.getElementById('holiday5');
				let holiday6 = document.getElementById('holiday6');
				let holiday7 = document.getElementById('holiday7');
				let holiday8 = document.getElementById('holiday8');
				let holiday9 = document.getElementById('holiday9');
				let holiday10 = document.getElementById('holiday10');
				let error1 = document.getElementById('error1');
				let error2 = document.getElementById('error2');

				//チェック用値
				let closed1 = document.getElementById('closed1').value;
				let closed2 = document.getElementById('closed2').value;
				let closed3 = document.getElementById('closed3').value;
				let closed4 = document.getElementById('closed4').value;
				let closed5 = document.getElementById('closed5').value;
				let closed6 = document.getElementById('closed6').value;
				let closed7 = document.getElementById('closed7').value;
				let closed8 = document.getElementById('closed8').value;
				let closed9 = document.getElementById('closed9').value;
				let closed10 = document.getElementById('closed10').value;

				let ampm1 = document.getElementById('ampm1').value;
				let ampm2 = document.getElementById('ampm2').value;
				let ampm3 = document.getElementById('ampm3').value;
				let ampm4 = document.getElementById('ampm4').value;
				let ampm5 = document.getElementById('ampm5').value;
				let ampm6 = document.getElementById('ampm6').value;
				let ampm7 = document.getElementById('ampm7').value;
				let ampm8 = document.getElementById('ampm8').value;
				let ampm9 = document.getElementById('ampm9').value;
				let ampm10 = document.getElementById('ampm10').value;

				let close1 = [closed2,closed3,closed4,closed5,closed6,closed7,closed8,closed9,closed10]
				let close2 = [closed1,closed3,closed4,closed5,closed6,closed7,closed8,closed9,closed10]
				let close3 = [closed1,closed2,closed4,closed5,closed6,closed7,closed8,closed9,closed10]
				let close4 = [closed1,closed2,closed3,closed5,closed6,closed7,closed8,closed9,closed10]
				let close5 = [closed1,closed2,closed3,closed4,closed6,closed7,closed8,closed9,closed10]
				let close6 = [closed1,closed2,closed3,closed4,closed5,closed7,closed8,closed9,closed10]
				let close7 = [closed1,closed2,closed3,closed4,closed5,closed6,closed8,closed9,closed10]
				let close8 = [closed1,closed2,closed3,closed4,closed5,closed6,closed7,closed9,closed10]
				let close9 = [closed1,closed2,closed3,closed4,closed5,closed6,closed7,closed8,closed10]
				let close10 = [closed1,closed2,closed3,closed4,closed5,closed6,closed7,closed8,closed9]

				console.log(closed1);

				for(let dates1 of close1){
					if(same1DateMsg === null && closed1 !== '' && closed1 === dates1) {
						let msg = '同じ日が指定されています。';
						let ptag = document.createElement('p');
						ptag.id = 'same1_date_msg';
						let text = document.createTextNode(msg);
						ptag.appendChild(text);
						error1.appendChild(ptag);
						event.preventDefault();
						}
						else{}

					if(same1DateMsg !== null && closed1 !== '' && closed1 === dates1) {
						document.getElementById('same1_date_msg').remove();
						let msg = '同じ日が指定されています。';
						let ptag = document.createElement('p');
						ptag.id = 'same1_date_msg';
						let text = document.createTextNode(msg);
						ptag.appendChild(text);
						error1.appendChild(ptag);
						event.preventDefault();
						}
						else{}

					if(same1DateMsg !== null && closed1 !== '' && closed1 !== dates1) {
						document.getElementById('same1_date_msg').remove();
						}
					}
				
				if(nullDateMsg === null && (!closed1) && (!closed2) && (!closed3) && (!closed4) && (!closed5) && (!closed6) && (!closed7) && (!closed8) && (!closed9) && (!closed10)){
						let msg = '休業日を設定します。';
						let ptag = document.createElement('p');
						ptag.id = 'null_date_msg';
						let text = document.createTextNode(msg);
						ptag.appendChild(text);
						error2.appendChild(ptag);
						event.preventDefault();
						}
						else{}

				if(nullDateMsg !== null && (!closed1) && (!closed2) && (!closed3) && (!closed4) && (!closed5) && (!closed6) && (!closed7) && (!closed8) && (!closed9) && (!closed10)){
						document.getElementById('null_date_msg').remove();
						let msg = '休業日を設定します。';
						let ptag = document.createElement('p');
						ptag.id = 'null_date_msg';
						let text = document.createTextNode(msg);
						ptag.appendChild(text);
						error2.appendChild(ptag);
						event.preventDefault();
						}
						else{}

				if(nullDateMsg !== null && closed1 !== '' ||
					nullDateMsg !== null && closed2 !== '' ||
					nullDateMsg !== null && closed3 !== '' ||
					nullDateMsg !== null && closed4 !== '' ||
					nullDateMsg !== null && closed5 !== '' ||
					nullDateMsg !== null && closed6 !== '' ||
					nullDateMsg !== null && closed7 !== '' ||
					nullDateMsg !== null && closed8 !== '' ||
					nullDateMsg !== null && closed9 !== '' ||
					nullDateMsg !== null && closed10 !== '' ){
					document.getElementById('null_date_msg').remove();
					}

				if(closed1Msg === null && closed1 !== '' && ampm1 == 0){
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed1_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday1.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed1Msg !== null && closed1 !== '' && ampm1 == 0){
					document.getElementById('closed1_msg').remove();
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed1_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday1.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed1Msg !== null && closed1 !== '' && ampm1 != 0){
					document.getElementById('closed1_msg').remove();
					}

				if(closed1Msg !== null && closed1 === '' && ampm1 == 0){
					document.getElementById('closed1_msg').remove();
					}

				if(closed2Msg === null && closed2 !== '' && ampm2 == 0){
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed2_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday2.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed2Msg !== null && closed2 !== '' && ampm2 == 0){
					document.getElementById('closed2_msg').remove();
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed2_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday2.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed2Msg !== null && closed2 !== '' && ampm2 != 0){
					document.getElementById('closed2_msg').remove();
					}

				if(closed2Msg !== null && closed2 === '' && ampm2 == 0){
					document.getElementById('closed2_msg').remove();
					}

				if(closed3Msg === null && closed3 !== '' && ampm3 == 0){
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed3_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday3.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed3Msg !== null && closed3 !== '' && ampm3 == 0){
					document.getElementById('closed3_msg').remove();
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed3_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday3.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed3Msg !== null && closed3 !== '' && ampm3 != 0){
					document.getElementById('closed3_msg').remove();
					}

				if(closed3Msg !== null && closed3 === '' && ampm3 == 0){
					document.getElementById('closed3_msg').remove();
					}

				if(closed4Msg === null && closed4 !== '' && ampm4 == 0){
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed4_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday4.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed4Msg !== null && closed4 !== '' && ampm4 == 0){
					document.getElementById('closed4_msg').remove();
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed4_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday4.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed4Msg !== null && closed4 !== '' && ampm4 != 0){
					document.getElementById('closed4_msg').remove();
					}

				if(closed4Msg !== null && closed4 === '' && ampm4 == 0){
					document.getElementById('closed4_msg').remove();
					}

				if(closed5Msg === null && closed5 !== '' && ampm5 == 0){
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed5_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday5.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed5Msg !== null && closed5 !== '' && ampm5 == 0){
					document.getElementById('closed5_msg').remove();
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed5_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday5.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed5Msg !== null && closed5 !== '' && ampm5 != 0){
					document.getElementById('closed5_msg').remove();
					}

				if(closed5Msg !== null && closed5 === '' && ampm5 == 0){
					document.getElementById('closed5_msg').remove();
					}

				if(closed6Msg === null && closed6 !== '' && ampm6 == 0){
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed6_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday6.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed6Msg !== null && closed6 !== '' && ampm6 == 0){
					document.getElementById('closed6_msg').remove();
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed6_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday6.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed6Msg !== null && closed6 !== '' && ampm6 != 0){
					document.getElementById('closed6_msg').remove();
					}

				if(closed6Msg !== null && closed6 === '' && ampm6 == 0){
					document.getElementById('closed6_msg').remove();
					}

				if(closed7Msg === null && closed7 !== '' && ampm7 == 0){
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed7_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday7.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed7Msg !== null && closed7 !== '' && ampm7 == 0){
					document.getElementById('closed7_msg').remove();
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed7_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday7.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed7Msg !== null && closed7 !== '' && ampm7 != 0){
					document.getElementById('closed7_msg').remove();
					}

				if(closed7Msg !== null && closed7 === '' && ampm7 == 0){
					document.getElementById('closed7_msg').remove();
					}

				if(closed8Msg === null && closed8 !== '' && ampm8 == 0){
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed8_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday8.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed8Msg !== null && closed8 !== '' && ampm8 == 0){
					document.getElementById('closed8_msg').remove();
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed8_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday8.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed8Msg !== null && closed8 !== '' && ampm8 != 0){
					document.getElementById('closed8_msg').remove();
					}

				if(closed8Msg !== null && closed8 === '' && ampm8 == 0){
					document.getElementById('closed8_msg').remove();
					}

				if(closed9Msg === null && closed9 !== '' && ampm9 == 0){
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed9_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday9.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed9Msg !== null && closed9 !== '' && ampm9 == 0){
					document.getElementById('closed9_msg').remove();
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed9_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday9.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed9Msg !== null && closed9 !== '' && ampm9 != 0){
					document.getElementById('closed9_msg').remove();
					}

				if(closed9Msg !== null && closed9 === '' && ampm9 == 0){
					document.getElementById('closed9_msg').remove();
					}

				if(closed10Msg === null && closed10 !== '' && ampm10 == 0){
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed10_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday10.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed10Msg !== null && closed10 !== '' && ampm10 == 0){
					document.getElementById('closed10_msg').remove();
					let msg = '時間帯を選択してください。';
					let ptag = document.createElement('p');
					ptag.id = 'closed10_msg';
					let text = document.createTextNode(msg);
					ptag.appendChild(text);
					holiday10.appendChild(ptag);
					event.preventDefault();
					}
					else{}

				if(closed10Msg !== null && closed10 !== '' && ampm10 != 0){
					document.getElementById('closed10_msg').remove();
					}

				if(closed10Msg !== null && closed10 === '' && ampm10 == 0){
					document.getElementById('closed10_msg').remove();
					}

		},false)
	},false)
</script>
<noscript>
	JavaScriptを実行できません。
</noscript>

参考：PHPソース

<?php
	session_start();
	header('Expires:-1');
	header('Cache-Control:');
	header('Pragma:');
	function generateToken(){
		$bytes = openssl_random_pseudo_bytes(16);
		return bin2hex($bytes);
	}
	$token = generateToken();
	$_SESSION['token'] = $token;

	function escape($val)
	{
		return htmlspecialchars($val, ENT_QUOTES | ENT_HTML5, 'UTF-8');
	}

?>
<!doctype html>
<html lang=ja>
	<head>
		<meta charset="utf-8">
		<title>休日メンテナンス</title>
		<meta name="description" content="Salon Yuri-rinの管理者ページ">
		<!--リセットcss-->
		<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
		<!--css-->
		<link rel="stylesheet" href="css/calender_mainte_style.css">
		<!--レスポンシブ対応-->
		<meta name="viwport" content="width=device-width, initial-scale=1">
		<!--Googleフォント-->
		<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500&display=swap" rel="stylesheet">
	</head>
	<body>
		<h1>休日メンテナンス</h1>
		<form method="post" class=holiday_mainte id="holiday_mainte" action="holiday_mainte_conf.php">
			<input type="hidden" name="token" class="token" id="token" value="<?=$token?>">
			<div class="holiday1" id="holiday1">
				<label for="closed1">休業日1</label>
				<input type="date" name="closed1" class="closed1" id="closed1">
				<select name="ampm1" id="ampm1">
					<option value=0></option>
					<option value=1>午前</option>
					<option value=2>午後</option>
					<option value=3>終日</option>
				</select>
			</div>
			<div class="holiday2" id="holiday2">
				<label for="closed2">休業日2</label>
				<input type="date" name="closed2" class="closed2" id="closed2">
				<select name="ampm2" id="ampm2">
					<option value=0></option>
					<option value=1>午前</option>
					<option value=2>午後</option>
					<option value=3>終日</option>
				</select>
			</div>
			<div class="holiday3" id="holiday3">
				<label for="closed3">休業日3</label>
				<input type="date" name="closed3" class="closed3" id="closed3">
				<select name="ampm3" id="ampm3">
					<option value=0></option>
					<option value=1>午前</option>
					<option value=2>午後</option>
					<option value=3>終日</option>
				</select>
			</div>
			<div class="holiday4" id="holiday4">
				<label for="close4">休業日4</label>
				<input type="date" name="closed4" class="closed4" id="closed4">
				<select name="ampm4" id="ampm4">
					<option value=0></option>
					<option value=1>午前</option>
					<option value=2>午後</option>
					<option value=3>終日</option>
				</select>
			</div>
			<div class="holiday5" id="holiday5">
				<label for="close5">休業日5</label>
				<input type="date" name="closed5" class="closed5" id="closed5">
				<select name="ampm5" id="ampm5">
					<option value=0></option>
					<option value=1>午前</option>
					<option value=2>午後</option>
					<option value=3>終日</option>
				</select>
			</div>
			<div class="holiday6" id="holiday6">
				<label for="close6">休業日6</label>
				<input type="date" name="closed6" class="closed6" id="closed6">
				<select name="ampm6" id="ampm6">
					<option value=0></option>
					<option value=1>午前</option>
					<option value=2>午後</option>
					<option value=3>終日</option>
				</select>
			</div>
			<div class="holiday7" id="holiday7">
				<label for="close7">休業日7</label>
				<input type="date" name="closed7" class="closed7" id="closed7">
				<select name="ampm7" id="ampm7">
					<option value=0></option>
					<option value=1>午前</option>
					<option value=2>午後</option>
					<option value=3>終日</option>
				</select>
			</div>
			<div class="holiday8" id="holiday8">
				<label for="close8">休業日8</label>
				<input type="date" name="closed8" class="closed8" id="closed8">
				<select name="ampm8" id="ampm8">
					<option value=0></option>
					<option value=1>午前</option>
					<option value=2>午後</option>
					<option value=3>終日</option>
				</select>
			</div>
			<div class="holiday9" id="holiday9">
				<label for="close9">休業日9</label>
				<input type="date" name="closed9" class="closed9" id="closed9">
				<select name="ampm9" id="ampm9">
					<option value=0></option>
					<option value=1>午前</option>
					<option value=2>午後</option>
					<option value=3>終日</option>
				</select>
			</div>
			<div class="holiday10" id="holiday10">
				<label for="close10">休業日10</label>
				<input type="date" name="closed10" class="closed10" id="closed10">
				<select name="ampm10" id="ampm10">
					<option value=0></option>
					<option value=1>午前</option>
					<option value=2>午後</option>
					<option value=3>終日</option>
				</select>
			</div>
			<div id="error1">
			</div>
			<div id="error2">
			</div>
			<div class="buttons">
				<button type="button" class="button_re" name="button_re" id="button_re" onclick="history.back()">戻る</button>
 				<button type="submit" class="button" name="button" id="button">確定</button>
			</div>
		</form>
	<?php require_once('js/holiday_mainte_chk_js.php')?>
	</body>
</html>
0

3Answer

Verclene
@Verclene

ちょっと1から説明するのはめんｄ大変なのですが,以下のような感じにデバッグを入れてみてください.

+            let count = 2
            for (let dates1 of close1) {
+                console.log(`Referencing ${count++}`)

そして休業日1と休業日2のみに同じ日を入れて確定を「2回」押すと,以下のコンソールとともに問題が再現できるはずです.

Referencing 2
Referencing 3
Referencing 4
Uncaught TypeError...

そこで慎重にチャートを辿ってみると,2回目に確定を押した時以下のようなことが起こっているのが分かります.

  1. closed2を見に行って日付が重複しているのでエラーメッセージを表示する.
  2. closed3を見に行って日付が重複していないのでエラーメッセージを消す.
  3. closed4を見に行って日付が重複していないのでエラーメッセージを消そうとするが,エラーメッセージはもうない(のでエラーを吐く).

直接的な原因としては,「重複を検知した時点でそれ以上のループは不要なのに処理を脱出できる構造でない」こと,根本的な問題として,各部で行う処理を分割関数化せずに巨大すぎるループを組んでいることが挙げられます.

ついでに一応聞いておきますが,このコードだと休業日2と3とかの組み合わせで重複を検知できませんがまさか全日分同じコードを書くおつもりじゃありませんよね？

1Like

Comments

  1. @Verclene

    1点言い忘れていました.
    イベントリスナーのeventはきちんと引数から受け取るようにしてください(Window.eventは使用しないでください).

    -/*...*/.addEventListener('click', function(){
+/*...*/.addEventListener('click', function(event){
Verclene
@Verclene

仰っている「93行目」にそのソースはありません.
コードの抜粋は問題を再現できる状況にあることを確認して行うようお願いします.

ログによれば発生地点はholiday_mainte.phpの221行48列です.異なるファイルを添付していないかも確認してください.

0Like

Comments

  1. @Verclene

    問題と全然関係はありませんが,ワンオフ制作であることを考慮してもかなり読みづらいコードです.
    重複検出のロジックはともかくエラーメッセージの表示処理がこれだけ何回も個別に書かれる意味はないので,関数化を強く推奨します.

    あとidだけではなくclassも積極的に活用しましょう.

    // NG
document.getElementById('day1');
document.getElementById('day2');
// ...

// Good
document.querySelectorAll('.day').forEach(e => /* ... */);

  2. @jackytom

    Questioner

    ご指摘ありがとうございます。
    ソースを添付し直しました。
    書き方のアドバイスもありがとうございました。

blue32a
@blue32a

再現手順が合っているかわかりませんが、エラーは確認できました。

連打すると、デバッグツールにて下記のエラーが出ます。

”同じ日が指定されています。”のメッセージが表示されている状態で再度確定ボタンを押す、と解釈しています。

原因について

結論から言うと93行目が複数回実行されています。

例として休業日1と休業日2にそれぞれ、2023/09/01と同じ日付を設定して確定ボタンを押します。（休業日3以降は未入力）
初回は”同じ日が指定されています。”のメッセージが表示されて、エラーは発生しません。

その状態でもう一度確定ボタンを押すとエラーが発生します。
この時、１度目のループ（休業日1と休業日2の比較）では80行の条件がtrueとなるので、81-88行が実行されます。
エラーメッセージは一度削除されて、もう一度追加されることになります。

そして２度目のループ（休業日1と休業日3の比較）では92行の条件がtrueとなるので、93行が実行されます。（休業日3は未入力）
ここで１度目のループで追加されたエラーメッセージは削除されます。

次の３度目のループ（休業日1と休業日4の比較）では92行の条件がtrueとなるので、93行が実行されます。（休業日4は未入力）
エラーメッセージは削除が実行されますが、２度目のループで削除されて要素がないので、エラーになります。

原因調査の方法について

このような問題の原因調査をするには、まず実行中の変数の状態や、プログラムが実行される順序などを把握することです。
JavaScriptであればブラウザのデベロッパーツールでデバッグすることができます。
１行ずつステップ実行していけば、状況を把握していくことができるでしょう。

場当たり的な解決方法はありそうですが、まずはご自身でどのあたりが想定外の動作をしているのか確認するのが良いと思います。

0Like

Your answer might help someone💌

LoginSign Up