チェックボックスがONになっている値を返してくれない

javascript
1<html>
2<body>
3<form name = "chbox">
4<p>あなたの好きな動物は？（複数可）</p>
5       <input type="checkbox" value="イヌ">イヌ<br>
6       <input type ="checkbox" value="ネコ">ネコ<br>
7       <input type="checkbox"  value="ウサギ">ウサギ<br>
8       <input type ="checkbox" value="ハムスター">ハムスター<br>
9       <input type ="checkbox" value="熱帯魚">熱帯魚<br>
10       <input type="checkbox" value="他">この中には無い<br>
11       <input type="button" value="確認"　onclick="boxCheck()">
12</form>
13
14<script>
15    function boxCheck(){
16    let str ="";                             //チェックされた項目を記録する変数をstrとします
17    for ( i = 0 ;  i<6 ; i++ )         //for文でチェックボックスを１つずつ確認
18   {　　　　　　　　　　　　　　　　　　 
19        if( document.chbox.elements[i].checked)　　//0,1,2,3,4,5の各要素がチェックされているかを確認
20        {
21
22       if( str  != "" )   str = str + "," ;　　　　　//もしstrが空白でなかったら（チェックされていたら）strにはstrに,をつけて代入
23  
24       str =str+document.chbox.elements[i].value;　//チェックボックスのvalue
25　　}
26       }　　　　　　　　　　
27       if ( str ==""){　　　　　　　　　　　
28          alert( "どれか選択してください" );　　//どれか選択してください　という文字列を表示
29　}else{　　　　　　　　　　　　　　　　　  //そうでなければ
30          alert( str + "が選択されました" );　 //選択された文字列を,つきで表示
31      }　
32    }
33
34</script>
35
36</body>
37</html>
38
39

チェックを入れて「確認」ボタンをクリックしても、alertが表示されません。
https://www.pazru.net/js/form/2.htmlのサンプルの真似をして自分で入力してゆきました。
しかし自分が記述したものは全く反応しません。
サンプルと照らし合わせて何度もやり直して全く同じだと思うのですが、どこがいけないのか分かりません。varをletに変えたぐらいです。
ご指摘いただけたら有難いです。よろしくお願いします。

maisumakun

2019/12/20 08:18

コンソールにエラーは出ていませんか？

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

回答3件

ベストアンサー

こんにちは、 hisayan さん。

確かに表面上は var と let 以外は同じコード構成になってますが、一箇所だけ問題のある部分がありました。

一般的にプログラミングでは、文字の区切りでいろいろな判定をしていて、（プログラムコードのトークン）、今回指摘の部分は全角文字を入れられることができない部分だったため、正常に動作しなかったようです。

<input type="checkbox" ... は半角スペースだからOK

<inputtype="checkbox" ... は離れてないのでNG

<input　type="checkbox" ...は全角スペースだからNG

参考になれば幸いです

投稿2019/12/20 08:39

gentamura

総合スコア406

miyabi_pudding

2019/12/20 09:43

JSコード内にも全角がいっぱい・・・。（JSはそれでも動くけど）

hisayan

2019/12/20 23:46

勉強になりました。ありがとうございました。

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

html
1<html>
2<body>
3<form name="chbox">
4
5<p>あなたの好きな動物は？（複数可）</p>
6<label><input type="checkbox" name="animal" value="イヌ">イヌ</label><br>
7<label><input type ="checkbox" name="animal" value="ネコ">ネコ</label><br>
8<label><input type="checkbox" name="animal" value="ウサギ">ウサギ</label><br>
9<label><input type ="checkbox" name="animal" value="ハムスター">ハムスター</label><br>
10<label><input type ="checkbox" name="animal" value="熱帯魚">熱帯魚</label><br>
11<label><input type="checkbox" name="animal" value="他">この中には無い</label><br>
12<input type="button" value="確認" onclick="boxCheck()">
13
14</form>
15
16<script>
17
18function boxCheck(){
19  const valStr = [].filter.call(document.chbox.animal, val => val.checked).map(val => val.value).join(',');
20  alert(valStr.length > 0 ? `${valStr}が選択されました` : 'どれか選択してください');
21}
22
23</script>
24</body>
25</html>