エラーの原因がわからない

ryo-dev

総合スコア437

0グッド

0クリップ

投稿2016/11/28 13:08

編集2016/11/29 12:35

ドットインストールで間違い探しを作るというのをやっていたんですが、20行目でエラーが出てしまい、先に進めません。

html
1<!DOCTYPE html>
2    <html lang="ja">
3        <head>
4            <meta charset="utf-8">
5            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
6            <title>間違い探しゲーム</title>
7        </head>
8        <body>
9            <h1>間違い探しゲーム</h1>
10            <p><input type="button" value="開始！" onclick="gameStart();"></p>
11            <div id="cells"></div>
12            <script>
13                function gameStart() {
14                    var dummy = '問';
15                    var seikai = '間';
16                    var dim = 5;
17                    
18                    // dim * dimにspan要素を作って#cellsに入れる
19                    var cells = '';
20                    for (var i = 1; i <= dim * dim; i++){
21                        cells += '<span id="s' + i + '"></span>'; 
22                        if (i % dim == 0){
23                            cells += '<br>';
24                        }
25                    }
26                    $('#sells').html(cells);
27                    
28                    //dummyで埋められた配列を作る
29                    var chars = [];
30                    for (var i = 0; i < dim * dim; i++){
31                        chars.push(dummy);
32                    }
33                    
34                    //配列のうち一つを正解にする
35                    var offset = Math.floor(Math.random() * chars.length);
36                    chars.splice(offset, 1, seikai);
37                    
38                    // console.log(chars);
39                    
40                    //span要素にそれらの配列の値をはめこむ
41                    for (var i = 1; i <= chars.length; i++){
42                        $('#s'+i).text(chars[i - 1]);
43                        $('#s'+i).click(function(){
44                            if($(this).text() == seikai){
45                                alert("正解!");
46                            }
47                        });
48                    }
49                }
50            </script>
51        </body>
52    </html>

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

回答3件

ベストアンサー

とりあえず直したところにコメントをしておきました。
私のブラウザだとこれで動いたのですが･･･
エラーが出る、とはどのようなエラーなのか、どんな動作を実現したいのか、など書いてもらえるとうれしいかもしれません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6<body>
7<h1>間違いさがしゲーム</h1>
8<p><input type="button" value="開始" onclick="gameStart();"></p>
9<div id="cells"></div>
10<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
11<script>
12    function gameStart() {
13        var dummy = '問';
14        var seikai = '間';
15        var dim = 5;
16
17        var cells = '';
18        for (var i = 1; i <= dim * dim; i++) {
19            cells += '<span id = "s' + i + '"></span>';
20            if (i % dim == 0) {
21                cells += '<br>';
22            }
23        }
24        $('#cells').html(cells);//#cellsにした
25
26        var chars = [];
27        for (var i = 0; i < dim * dim; i++) {
28            chars.push(dummy);
29        }
30
31        var offset = Math.floor(Math.random() * chars.length);
32        chars.splice(offset, 1, seikai);
33
34
35        for (var i = 1; i <= chars.length; i++) {
36            $('#s' + i).text(chars[i - 1]);//$('#s' + i)にした
37            $('#s' + i).click(function () {//$('#s' + i)にした
38                if ($(this).text() == seikai) {
39                    alert("正解!");
40                }
41            });
42        }
43    }
44</script>
45</body>
46</html>

投稿2016/11/28 14:35

編集2016/11/29 06:48

退会済みユーザー

総合スコア0

ryo-dev

2016/11/28 14:37

修正点は同じなんですが・・・もう一度確認してきます。エラーは、開始を押しても、何も表示されないエラーです。

退会済みユーザー

2016/11/28 14:57

あまり関係がないと思いますが、念のためブラウザを変えて見てみてはいかがですか？

toutou

2016/11/28 15:04

http://difff.jp/　こことかで自分の作ったのと比較してみてください。

ryo-dev

2016/11/28 16:56

2つのアドバイスをやってみます

ryo-dev

2016/11/29 12:50

解決いたしました。 $('#cells').html(cells); が $('#sells').html(cells); になってました。ありがとうございました。

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

そうとうtypoがありますね、いくつか例示すると

$('sells') → $('#cells')
$('#s'+1) → $('#s'+i)

あたりが致命的

#sample

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
2<script>
3$(function(){
4  $('[value="開始！"]').on('click',function(){
5    var dummy = '□';
6    var seikai = '■';
7    var dim = 5;
8    var len=dim*dim;
9    $('#cells').empty();
10    for (var i = 1; i <= len; i++){
11      $('<span>').attr('id','s'+i).text(dummy).appendTo($('#cells')); 
12      if (i % dim == 0){
13        $('<br>').appendTo($('#cells')); 
14      }
15    }
16    var offset = Math.floor(Math.random() * len) ;
17    console.log(offset);
18    $('#cells span').eq(offset-1).text(seikai);
19    $('#cells span').filter(function(){return $(this).text()==seikai;}).on('click',function(){
20      alert("正解!");
21    });
22  });
23});
24</script>
25<h1>間違い探しゲーム</h1>
26<p><input type="button" value="開始！"></p>
27<div id="cells"></div>
28