希望する変数に値がうまくセットされない

下記
サンプルソースにて
oldcheck という変数に値がうまくセットされません

このサンプルソースで表示されるWEB画面にて
○をクリックすると、●になり
別の○をクリックすると、前に●になったところが○に戻るように
したいのですが、
その場所を示す oldcheck の変数に値がうまく入ってきません

function check の中で
checkclearの行をコメントにすると変数には値が
正しくセットされますが、
その場合当然、●が○にならないため、希望通りの動きになりません。

javascriptに慣れていないため、原因がわからず困っています。

どなたかご教授のほどお願いいたします。

javascript
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
6
7<link rel="stylesheet" href="tableset.css" type="text/css">
8
9<script>
10
11	var oldcheck = '';
12	var nowcheck = '';
13	var leaveno=0;
14	var setno=0;
15</script>
16<script>
17
18// 引数で指定したindexnoに応じたIDを持つ要素を#ulistに追加
19function add(indexno)
20{
21    // #ulistというIDを持つ要素を取得
22    var parent_object = document.getElementById("ulist");
23
24    // parent_objectが存在しない時は処理を中断
25    if (!parent_object) {
26      return;
27    }
28
29	setno++;
30	setid = 'set' + ('0000'+setno).slice(-4);
31
32    // <div1>などの定義されていない要素ではなく<div>を生成する
33    var div_element = document.createElement("div");
34    // 生成したdiv要素にIDを追加
35    div_element.id = "div"+indexno;
36    // 生成したdiv要素の内容を指定したHTMLに書き換える
37	addtable =	'<table class="set_table" border="1">';
38	addtable +=	'<tr><td class="td" width="40" align="center">';
39
40	addtable +=	'<a href="#" onclick="check(\'';
41	addtable +=	setid +'\')" class="undernone">';
42	addtable +=	'<span id="';
43	addtable +=	setid + '">';
44
45
46	addtable +=	'○';
47
48	addtable +=	'</span></a>';
49
50
51	addtable +=	'</td>';
52	addtable +=	'<td class="td" width="60" align="center">00['+indexno+']</td>';
53	addtable +=	'<td class="td" width="60" align="center">氏名['+indexno+']</td>';
54	addtable +=	'<td class="td" width="300" align="left">住所['+indexno+']</td>';
55	addtable +=	'<td class="td" width="100" align="center">03-xxxx-xxx'+indexno+'</td>';
56	addtable +=	'</tr>';
57	addtable +=	'</table>';
58	div_element.innerHTML = addtable;
59    // 生成したdiv要素を#ulistの子要素としてDOMに追加する
60    parent_object.appendChild(div_element);
61}
62
63
64function add2(indexno)
65{
66    // #ulistというIDを持つ要素を取得
67    var parent_object = document.getElementById("ulist2");
68
69    // parent_objectが存在しない時は処理を中断
70    if (!parent_object) {
71      return;
72    }
73
74	leaveno++;
75	leaveid = 'leave' + ('0000'+leaveno).slice(-4);
76
77    // <div1>などの定義されていない要素ではなく<div>を生成する
78    var div_element = document.createElement("div");
79    // 生成したdiv要素にIDを追加
80    div_element.id = "div_l_"+indexno;
81
82    // 生成したdiv要素の内容を指定したHTMLに書き換える
83
84	addtable2 =	'<table class="leave_table">';
85	addtable2 +=	'<tr><td class="td" width="40" align="center">';
86
87
88	addtable2 +=	'<a href="#" onclick="check(\'';
89	addtable2 +=	leaveid +'\')" class="undernone">';
90	addtable2 +=	'<span id="';
91	addtable2 +=	leaveid + '">';
92
93
94	addtable2 +=	'○';
95
96	addtable2 +=	'</span></a>';
97
98	addtable2 +=	'</td>';
99	addtable2 +=	'<td class="td" width="60" align="center">';
100	addtable2 +=	'氏名['+indexno+']';
101	addtable2 +=	'</td>';
102	addtable2 +=	'<td class="td" width="360" align="left">';
103	addtable2 +=	'住所['+indexno+']';
104	addtable2 +=	'</td>';
105	addtable2 +=	'<td class="td" width="100" align="center">';
106	addtable2 +=	'03-xxxx-xxx'+indexno;
107	addtable2 +=	'</td>';
108	addtable2 +=	'</tr>';
109	addtable2 +=	'</table>';
110
111    div_element.innerHTML = addtable2;
112
113    // 生成したdiv要素を#ulistの子要素としてDOMに追加する
114    parent_object.appendChild(div_element);
115}
116
117// 引数で指定したindexnoに応じたIDを持つ要素を削除
118function del(indexno)
119{
120    // 追加した要素から指定したIDを持つ要素を取得
121    var div_element = document.getElementById("div"+indexno);
122
123    // 要素を取得できたときだけ削除を実行する
124    if (div_element) {
125      // 取得した要素を削除
126      // div_elementがちゃんとremoveChildの対象である子要素となるようにする
127      // 「div_elementの親要素」(div_element.parentNode)「の子要素であるdiv_elementを削除」(.removeChild(div_element))とすることでdiv_elementを削除できる
128      div_element.parentNode.removeChild(div_element);
129    }
130}
131
132
133// 引数で指定したindexnoに応じたIDを持つ要素を削除
134function del2(indexno)
135{
136    // 追加した要素から指定したIDを持つ要素を取得
137    var div_element = document.getElementById("div_l_"+indexno);
138
139    // 要素を取得できたときだけ削除を実行する
140    if (div_element) {
141      // 取得した要素を削除
142      // div_elementがちゃんとremoveChildの対象である子要素となるようにする
143      // 「div_elementの親要素」(div_element.parentNode)「の子要素であるdiv_elementを削除」(.removeChild(div_element))とすることでdiv_elementを削除できる
144      div_element.parentNode.removeChild(div_element);
145    }
146}
147
148function checkclear(id) {
149	var clearpoint = document.getElementById(id);
150	alert('clear='+id);
151	clearpoint.innerHTML = '○';
152}
153
154function checkset(id) {
155	var checkpoint = document.getElementById(id);
156	checkpoint.innerHTML = '●';
157}
158function check(checkid) {
159
160	alert('checkid='+checkid + '  oldcheck='+oldcheck);
161
162	checkset(checkid);
163
164	if (oldcheck!=checkid) {
165		alert('def checkid='+checkid + '  oldcheck='+oldcheck);
166		checkclear(oldcheck);
167#↑の行をコメントにすると変数には希望の値がセットされる
168		oldcheck = checkid;
169	}
170
171	alert('clear oldcheck='+oldcheck);
172
173
174}
175
176</script>
177</head>
178
179<body>
180
181<div>
182<button onclick="add(1);">No1を追加！</button>
183<button onclick="add(2);">No2を追加！</button>
184<button onclick="add(3);">No3を追加！</button>
185<button onclick="add(4);">No4を追加！</button>
186<button onclick="add(5);">No5を追加！</button>
187<br>
188<button onclick="del(1);">[No1]を削除</button>
189<button onclick="del(2);">[No2]を削除</button>
190<button onclick="del(3);">[No3]を削除</button>
191<button onclick="del(4);">[No4]を削除</button>
192<button onclick="del(5);">[No5]を削除</button>
193<button onclick="del(0);">[No0]を削除</button>
194</div>
195<hr>
196<div>
197<button onclick="add2(1);">No1を追加！</button>
198<button onclick="add2(2);">No2を追加！</button>
199<button onclick="add2(3);">No3を追加！</button>
200<button onclick="add2(4);">No4を追加！</button>
201<button onclick="add2(5);">No5を追加！</button>
202<br>
203<button onclick="del2(1);">[No1]を削除</button>
204<button onclick="del2(2);">[No2]を削除</button>
205<button onclick="del2(3);">[No3]を削除</button>
206<button onclick="del2(4);">[No4]を削除</button>
207<button onclick="del2(5);">[No5]を削除</button>
208<button onclick="del2(0);">[No0]を削除</button>
209</div>
210
211
212<div id="ulist">
213
214<table class="set_table_title" border="1"><tr><td> 入居者リスト/入居予定リスト</td></tr></table>
215
216	<table class="set_table" border="1">
217	<tr>
218	<th class="th" width="40">対象</th>
219	<th class="th" width="60">部屋番号</th>
220	<th class="th" width="60">氏名</th>
221	<th class="th" width="300">住所</th>
222	<th class="th" width="100">電話番号</th>
223	</tr>
224	</table>
225
226	<div id="set0">
227
228	<table class="set_table" border="1">
229	<tr>
230	<td class="td" width="40" align="center"><a href="#" onclick="check('set0')" class="undernone"><span id="set0">○</span></a></td>
231	<td class="td" width="60" align="center">xxx</td>
232	<td class="td" width="60" align="center">xxx</td>
233	<td class="td" width="300" align="left">住所0</td>
234	<td class="td" width="100" align="center">03-xxxx-xxxx</td>
235	</tr>
236	</table>
237
238	</div>
239
240</table>
241
242</div>
243
244<hr>
245
246<div id="ulist2">
247
248<table class="leave_table_title" border="1"><tr><td>退去者リスト</td></tr></table>
249
250	<table class="leave_table" border="1">
251	<tr>
252	<th class="th" width="40">対象</th>
253	<th class="th" width="60">氏名</th>
254	<th class="th" width="360">住所</th>
255	<th class="th" width="100">電話番号</th>
256	</tr>
257	</table>
258
259	<div id="leave0">
260
261	<table class="leave_table" border="1">
262	<tr>
263	<td class="td" width="40" align="center"><a href="#" onclick="check('leave0')" class="undernone"><span id="leave0">○</span><a></td>
264	<td class="td" width="60" align="center">xxxx</td>
265	<td class="td" width="360" align="left">住所0</td>
266	<td class="td" width="100" align="center">03-xxxx-xxxx</td>
267	</tr>
268	</table>
269
270	</div>
271</table>
272</div>
273
274
275
276</body>
277</html>

css(tableset.css)
1.undernone{
2	text-decoration:none;
3}
4
5.set_table_title{
6width:560px;
7background-color: #ffb6c1;
8border-collapse: collapse;
9border-spacing: 0px;
10border-style: thin solid #000000;
11font-size:small;
12color:#000000;
13}
14
15.set_table{
16width: 560px;
17border-collapse: collapse;
18background-color: transparent;
19font-size:small;
20border-style: thin solid #000000;
21}
22
23.set_table th{
24padding: 0px;
25text-align: center;
26color: #000000;
27font-size:small;
28background-color: #ffe4c4;
29}
30
31.set_table td{
32padding: 0px;
33text-decoration: none;
34font-size:small;
35color:#000000;
36background-color: #ffffff;
37}
38
39.leave_table_title{
40width:560px;
41background-color: #228b22;
42border-collapse: collapse;
43border-spacing: 0px;
44border-style: thin solid #000000;
45font-size:small;
46color:#ffffff;
47}
48
49.leave_table{
50width: 560px;
51border-collapse: collapse;
52border-style: thin solid #000000;
53background-color: transparent;
54font-size:small;
55}
56
57.leave_table th{
58padding: 0px;
59text-align: center;
60color: #000000;
61font-size:small;
62background-color: #fffacd;
63border-style: thin solid #000000;
64}
65
66.leave_table td{
67padding: 0px;
68text-decoration: none;
69font-size:small;
70color:#000000;
71background-color: #ffffff;
72border: thin solid #000;
73}
74

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

回答1件

ベストアンサー

check()からcheckclear()が呼ばれた時、「oldcheck」に値が入っていない（空文字）時にcheckclear()の var clearpoint = document.getElementById(id);が想定しているタグを取得できていないため、エラーになっているようです。

1回目のクリックでは「oldcheck」に値は入っていないと思いますので、値が入っていない場合に処理を行わないようなロジックを追加すればよさそうですね。

投稿2016/05/30 02:43