神経衰弱をjQueryで作成したが、エラー修正方法がわからない。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
jQueryを使用して神経衰弱を作成しています。

動作の流れとしては以下の通りです。
① 16枚のカードの中から「?」と書かれたものをひとつクリック
② そのカードに書かれている「?」が「1」などの数字に変わる
③ もうひとつ「?」と書かれたものをクリックする
④ その要素に書かれている「?」が「1」などの数字に変わる
⑤ ②と④で表示された数字が一致している場合は、開いた数字はそのままで①に戻る。一致していない場合は1秒後に数字が「?」に戻り①にもどる。
⑥: 全ての要素が開かれたときにアラートで「Game Over」
全16枚の８ペアで

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'text' of null

該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <ul class="lists clearfix">
  </ul>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//jQuery
</script>
</body>
</html>

css
1.lists {
2    border: 10px #CCC solid;
3}
4.lists > li {
5    float: left;
6    width: 25%;
7    background-color: #EEE;
8    border-top: 2px #CCC solid;
9    border-right: 2px #CCC solid;
10    font-size: 20px;
11    font-weight: bold;
12    line-height: 75px;
13    text-align: center;
14    cursor: pointer;
15    -webkit-box-sizing: border-box;
16    box-sizing: border-box;
17}
18.lists > li:nth-child(-n + 4) {
19    border-top: none;
20}
21.lists > li:nth-child(4n) {
22    border-right: none;
23}

jQuery
1$(function() {
2  const cardLists = $(".lists"),
3        totalCard = 16, //カード枚数
4        cardNum = []; //カード配列
5        returnSec = 500, //めくったカードが戻る秒数
6        firstClick = false, //クリックしたカードが1枚目かどうかの判定
7        secondClick = true,
8        pair = 0; //正解したカードのペア数
9  let   index, //クリックしたカードの並び順
10        card1,  //1枚目に引いたカードの番号
11        card2;  //2枚目に引いたカードの番号
12  //カード追加
13  function cardAdd() {
14  for (let i = 1; i <= totalCard / 2; i++) {
15    cardNum.push(i,i);
16  }
17  cardNum.sort(function() {
18    return Math.random() - Math.random();
19  });
20  let listItems = cardNum.map(function(num) {
21    return "<li data-num='" + num + "'>?</li>";
22    });
23    cardLists.append(listItems);
24  }
25  //カードを閉じる
26  function close() {
27    setTimeout(function() {
28    card1.text('?');
29    card2.text('?');
30    SecondClick = true;
31    }, returnSec)
32  }
33  // ペアカウント
34  function pairCount() {
35    pair++;
36  }
37  // カードを開く
38  function cardMove() {
39    $('li').click(function (){
40      $(this).text($(this).data('num'));
41      // 判定
42      card1 = $(this);
43      console.log(card1);
44      let currentNum = card1.data("num");
45      card1.text(currentNum);
46
47      if (card2 == undefined) {
48        card2 = currentNum;
49        index = card1;
50        firstClick = true;
51      } else if (card2 == currentNum) {
52        pairCount();
53        firstClick = true;
54        card2 = null;
55        if (pair == totalCard / 2) {
56          alert("Game Over");
57        }
58      } else {
59        firstClick = false;
60        card2 = null;
61        if(!firstClick) {
62          secondClick = false;
63          close();
64        }
65      }
66    });
67  }
68  cardAdd();
69  cardMove();
70});

補足情報（FW/ツールのバージョンなど）

1枚目のcardが1枚目として認識されておらず、２枚目が1枚目として認識されているそうなのですが、どこをどうすれば修正できるのかがわからないためアドバイスをいただきたいです。
よろしくおねがいします。

think49

2018/05/10 04:54

"⑥: 全ての要素が開かれたときにアラートで「Game Over」" は本当ですか。「クリア条件」が気になります。

bloock

2018/05/12 04:45

本当です。

think49

2018/05/12 04:56

そうですか。クリア条件が設定されていないゲームなんですね…。

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

回答2件

ベストアンサー

面倒でも動作を追っていくのがいいでしょう。
2枚目をクリックしてペアにならなかった時の動作が問題です。

js
1      } else {
2        firstClick = false;
3        card2 = null;          //ここでcard2にnullが入っているので、
4        if(!firstClick) {
5          secondClick = false;
6          close();             //card2はnullのまま、close関数へ
7        }
8      }

js
1  function close() {
2    setTimeout(function() {
3    card1.text('?');
4    card2.text('?');           //card2がnullなので、.textメソッドは使えない。
5    SecondClick = true;
6    }, returnSec)
7  }

解決方法としては、カードを閉じてからcard2をnullにした方がよいのでは。

ただ、card2に入っているのは、

js
1      if (card2 == undefined) {
2        card2 = currentNum;

と、文字列なのでここでも問題が起こります。

解決方法としては、card2にjQueryオブジェクトを入れましょう。
また、firstClickなどのフラグを持っているのですから、それを使って、1回目のクリックなのか2回目のクリックなのか判別するようにしてはいかがでしょうか。現状だと、何の役にも立ってないです。

投稿2018/05/08 10:56

Lhankor_Mhy

総合スコア36115

bloock

2018/05/10 04:06

回答ありがとうございます！ 1つ質問させて頂きたいです。 card2にjQueryオブジェクトを入れるということはどういうことでしょうか。よろしくお願いします。

Lhankor_Mhy

2018/05/10 04:47

どこからわからないのかがわからないので、頭から説明しますね。 $という記号がありますが、これはjQueryとイコールなんです。つまり、 $() は jQuery() と同じなんです。そして、jQuery() は関数です。関数というのは引数をとって値を返すものです。たとえば、Math.round() という関数がありますが、これは数値の引数を取って、四捨五入し、整数を返すものです。Math.round(1.1) は、1.1という引数をとって、1を返します。元に戻ります。jQuery() は関数です。引数をとって何かを返すのですが、これが jQueryオブジェクトです。これを「jQuery() の返り値は jQueryオブジェクト」などと表現します。さて、$() が jQueryオブジェクトを返すことはご理解いただけたと思います。それでは、card2に jQueryオブジェクトを入れるためにはどうしたらいいでしょうか？そうですね、代入すればいいです。つまり、card2 = $(ほにゃらら); というコードがどこかになくてはいけないのです。

bloock

2018/05/11 03:43

回答ありがとうございます！今回だと card2 = $(ほにゃらら); の部分は card2 = $(hoge); のようなものでもいいのでしょうか？

Lhankor_Mhy

2018/05/12 00:10

今回の場合、hoge という変数は使っていないのではないでしょうか。適切な値を入れてください。card2 は2回目にクリックしたカードですよね？

bloock

2018/05/12 04:45

なるほど。ということは card2=$('SecondClick') になるということでしょうか。

Lhankor_Mhy

2018/05/12 05:46

jQueryの使い方をご存じないように見受けられましたので、簡単に説明します。 $(【セレクタ】) ↑これが基本の書き方です。セレクタはCSSセレクタとだいたい同様です。なので、 $('SecondClick') というのは、HTMLの<SecondClick></SecondClick>というタグを取得する、という意味です。コメントでのやり取りを拝見するに、質問者のjQueryなどの理解度に比べて、難しい問題に取り組まれているように感じました。もう少し、小さな課題から取り掛かられてはいかがですか？

bloock

2018/05/16 13:37

助言いただき有難うございます。もう一度簡単なものからやり直してみる事にします。

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