質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    16443questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6715questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5801questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4025questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2074questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 652

bloock

score 1

 前提・実現したいこと

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

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

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

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>
.lists {
    border: 10px #CCC solid;
}
.lists > li {
    float: left;
    width: 25%;
    background-color: #EEE;
    border-top: 2px #CCC solid;
    border-right: 2px #CCC solid;
    font-size: 20px;
    font-weight: bold;
    line-height: 75px;
    text-align: center;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.lists > li:nth-child(-n + 4) {
    border-top: none;
}
.lists > li:nth-child(4n) {
    border-right: none;
}
$(function() {
  const cardLists = $(".lists"),
        totalCard = 16, //カード枚数
        cardNum = []; //カード配列
        returnSec = 500, //めくったカードが戻る秒数
        firstClick = false, //クリックしたカードが1枚目かどうかの判定
        secondClick = true,
        pair = 0; //正解したカードのペア数
  let   index, //クリックしたカードの並び順
        card1,  //1枚目に引いたカードの番号
        card2;  //2枚目に引いたカードの番号
  //カード追加
  function cardAdd() {
  for (let i = 1; i <= totalCard / 2; i++) {
    cardNum.push(i,i);
  }
  cardNum.sort(function() {
    return Math.random() - Math.random();
  });
  let listItems = cardNum.map(function(num) {
    return "<li data-num='" + num + "'>?</li>";
    });
    cardLists.append(listItems);
  }
  //カードを閉じる
  function close() {
    setTimeout(function() {
    card1.text('?');
    card2.text('?');
    SecondClick = true;
    }, returnSec)
  }
  // ペアカウント
  function pairCount() {
    pair++;
  }
  // カードを開く
  function cardMove() {
    $('li').click(function (){
      $(this).text($(this).data('num'));
      // 判定
      card1 = $(this);
      console.log(card1);
      let currentNum = card1.data("num");
      card1.text(currentNum);

      if (card2 == undefined) {
        card2 = currentNum;
        index = card1;
        firstClick = true;
      } else if (card2 == currentNum) {
        pairCount();
        firstClick = true;
        card2 = null;
        if (pair == totalCard / 2) {
          alert("Game Over");
        }
      } else {
        firstClick = false;
        card2 = null;
        if(!firstClick) {
          secondClick = false;
          close();
        }
      }
    });
  }
  cardAdd();
  cardMove();
});

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • think49

    2018/05/10 13:54

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

    キャンセル

  • bloock

    2018/05/12 13:45

    本当です。

    キャンセル

  • think49

    2018/05/12 13:56

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

    キャンセル

回答 2

checkベストアンサー

+3

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

      } else {
        firstClick = false;
        card2 = null;          //ここでcard2にnullが入っているので、
        if(!firstClick) {
          secondClick = false;
          close();             //card2はnullのまま、close関数へ
        }
      }
  function close() {
    setTimeout(function() {
    card1.text('?');
    card2.text('?');           //card2がnullなので、.textメソッドは使えない。
    SecondClick = true;
    }, returnSec)
  }


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

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

      if (card2 == undefined) {
        card2 = currentNum;


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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/10 13:06

    回答ありがとうございます!

    1つ質問させて頂きたいです。
    card2にjQueryオブジェクトを入れるということはどういうことでしょうか。

    よろしくお願いします。

    キャンセル

  • 2018/05/10 13:47

    どこからわからないのかがわからないので、頭から説明しますね。
    $という記号がありますが、これはjQueryとイコールなんです。
    つまり、
    $() は jQuery() と同じ
    なんです。

    そして、jQuery() は関数です。関数というのは引数をとって値を返すものです。
    たとえば、Math.round() という関数がありますが、これは数値の引数を取って、四捨五入し、整数を返すものです。Math.round(1.1) は、1.1という引数をとって、1を返します。

    元に戻ります。jQuery() は関数です。引数をとって何かを返すのですが、これが jQueryオブジェクトです。これを「jQuery() の返り値は jQueryオブジェクト」などと表現します。

    さて、$() が jQueryオブジェクトを返すことはご理解いただけたと思います。
    それでは、card2に jQueryオブジェクトを入れるためにはどうしたらいいでしょうか?
    そうですね、代入すればいいです。
    つまり、card2 = $(ほにゃらら); というコードがどこかになくてはいけないのです。

    キャンセル

  • 2018/05/11 12:43

    回答ありがとうございます!

    今回だと
    card2 = $(ほにゃらら);
    の部分は
    card2 = $(hoge);
    のようなものでもいいのでしょうか?

    キャンセル

  • 2018/05/12 09:10

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

    キャンセル

  • 2018/05/12 13:45

    なるほど。
    ということは
    card2=$('SecondClick')

    になるということでしょうか。

    キャンセル

  • 2018/05/12 14:46

    jQueryの使い方をご存じないように見受けられましたので、簡単に説明します。

    $(【セレクタ】)
    ↑これが基本の書き方です。セレクタはCSSセレクタとだいたい同様です。
    なので、
    $('SecondClick')
    というのは、HTMLの<SecondClick></SecondClick>というタグを取得する、という意味です。

    コメントでのやり取りを拝見するに、質問者のjQueryなどの理解度に比べて、難しい問題に取り組まれているように感じました。
    もう少し、小さな課題から取り掛かられてはいかがですか?

    キャンセル

  • 2018/05/16 22:37

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

    キャンセル

+2

card2.text('?'); としている箇所がありますが、card2 = currentNum;となっているため、数値にtextと言うメソッドが無いとエラーが出ていますね。

デベロッパーツールで変数の状態を確認しながら修正してみてください。

【JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita】
http://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/08 19:56

    早速の回答有難うございます。
    やってみます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16443questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6715questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5801questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4025questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2074questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。