JavaScript エラー特定が分からない

・チェックボックス未チェックのままsubmitボタンを押下した場合はエラー(javascript:alert)を表示し、投稿を中止
という条件をJavaScriptのみで処理したいんですが、アラート表示(ERROR5)の条件がうまく処理できません

else if (up.checked == true || de.checked == true)の箇所についてなんですが、下記の流れで処理されると解釈しています
・条件式は変数up又はdeがチェックされた場合はtrue、変数caはchk[] という name属性を持つ要素を配列で取得、変数boxはチェックされたチェックボックスの数、for文中ではcaは配列なので、ループの中で 1つずつチェックされているか判定、更にif文中でcaがcb分チェックされていれば変数boxにcb分チェックされたcaを代入、もし変数boxが0に等しい場合にはERROR5を表示

・関数conditionの処理が全て行われるタイミングはフォームタグのreturn conditionで実行

という流れと考えましたが、いくら調べたり、アドバイスをいただいても改善しません

HTML
1<html>
2	<head>
3		<meta charset="utf-8">
4		<script>
5			function condition() {
6				var ps = document.getElementById("r1");
7				var up = document.getElementById("r2");
8				var de = document.getElementById("r3");
9				if (ps.checked == true || up.checked == true) {
10					if (document.getElementById('name').value.length >= 10) {
11						window.alert("ERROR1");
12						return false;
13					} else if (document.getElementById('name').value == "") {
14						window.alert("ERROR2");
15						return false;
16					} else if (document.getElementById('comment').value.length >= 300) {
17						window.alert("ERROR3");
18						return false;
19					} else if (document.getElementById('comment').value == "") {
20						window.alert("ERROR4");
21						return false;
22					}
23				} else if (up.checked == true || de.checked == true) {
24					var ca = document.getElementsByName('chkid[]');
25					var box = "";
26					for(var cb = 0; cb < ca.length; cb++) {
27						if (ca[cb].checked) {
28							box = ca[cb];
29						}
30					}
31					if (box == 0) {
32						window.alert("ERROR5");
33						return false;
34					}
35				}
36			}
37			function change(obj) {
38				console.log(obj.id);
39				if (obj.id == "r1") {
40					document.getElementById("send").value = "投稿";
41					chkchange(true);
42				} else if (obj.id == "r2") {
43					document.getElementById("send").value = "更新";
44					chkchange(false);
45				} else if (obj.id == "r3") {
46					document.getElementById("send").value = "削除";
47					chkchange(false);
48				}
49			}
50			function chkchange(bool) {
51				chk = document.getElementsByName('chkid[]');
52				for(var box = 0; box < chk.length; box++) {
53					console.log(chk[box]);
54					console.log(box);
55					chk[box].disabled = bool;
56				}
57			}
58		</script>
59	</head>
60	<body>
61		<form method="post" action=""  name="fn" onsubmit="return condition()">
62			<table>
63				<tr>
64					<td>
65						名前：<input type="text" name="name" id="name">
66						内容：<textarea name="comment" cols="30" rows="3" id="comment"></textarea>
67						<input type="radio" name="bbs" id="r1" value="post" onChange="change(this)">投稿
68						<input type="radio" name="bbs" id="r2" value="update" onChange="change(this)">更新
69						<input type="radio" name="bbs" id="r3" value="delete" onChange="change(this)">削除
70						<input type="submit" value="投稿" id="send">
71					</td>
72				</tr>
73			</table>
74
75<?php
76			while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
77?>
78
79			<table>
80				<input type="checkbox" name="chkid[]" value="<?=$row['id'] ?>">
81				<tr>
82					<td>名前：
83						<?php echo $row['name'] ?>
84					</td>
85				</tr>
86				<tr>
87					<td>内容：
88						<?php echo $row['comment'] ?>
89					</td>
90				</tr>
91			</table>
92
93<?php
94			}
95			mysqli_free_result($result);
96
97			mysqli_close($link);
98?>
99
100		</form>
101	</body>
102</html>

行動規範の内容に同意します

回答2件

ベストアンサー

一行ずつコードを作ってもらってるように見えてきました。それはさておきコードのほうにコメントアウトでどんな動きをするか書いてみたらどうですか？自分自身も整理できるし、回答者の人にもどんな解釈をしてるか知らせることが出来るので、より的確なアドバイスがもらえると思います。自分でコードを作って理解してるならさほど時間もかからないはずです。それができないのであればこれはまだレベルが高いので、もう一回時間をかけてもっと簡単なところからやりましょう。

投稿2016/09/04 12:56