動的にjavascriptで追加したオブジェクトの番号を取得できません

前提

https://gxy-life.com/2PC/PC/PC20220227.html
こちらのサイトを参考にさせていただきながら神経衰弱のゲームを作っています。

番号生成、シャッフル、画像生成、クリック時表裏、までは実装できましたが、正誤判定がうまくいきません。

//2枚目だったら1枚目と比較して結果を判定する。
if (firstCard.num === filipedCard.num) {

という部分（ページ下部）があるのですが、その前後で
console.log(filipedCard.num);
console.log(firstCard.num);
等行っても値が見つからないといわれます。

正誤判定のためのnumが取得できていません。
画像1のように、生成時にはnumは発行できていると思うのですが・・・。

実現したいこと

正誤判定のためのカードに埋め込まれた情報を取得して比較をしたいと思っています。グローバル関数などの問題が関連していますでしょうか、理由も知りたいです。

該当のソースコード

javascript
1    // 全てのカード情報を入れる配列
2    const cards = [];
3  
4    // カテゴリ
5    const suits = ["A","Q"];
6    //カードの枚数（QA合計）
7    const QAcard = 32;
8
9
10    // オブジェクト作成
11    function Card(suit, num) {
12        this.suit = suit;
13        this.num = num;
14        this.front = `${this.suit}${('0'+this.num).slice(-2)}.png`;
15    }
16
17    // カード情報を配列に格納
18    for (let i = 0; i < suits.length; i++) {
19        for (let j = 1; j <= QAcard/2; j++) {
20            let card = new Card(suits[i], j);
21            cards.push(card);
22            console.log(card)
23        }
24    }
25
26    const table = document.querySelector(".table");
27 
28  // シャッフルする関数
29  function shuffle(arrays) {
30    const array = arrays.slice();
31    for (let i = array.length - 1; i >= 0; i--) {
32      const randomIndex = Math.floor(Math.random() * (i + 1));
33      [array[i], array[randomIndex]] = [array[randomIndex], array[i]];
34    }
35    return array;
36  }
37
38  // シャッフルし、HTML生成
39  function shuffleCard(){
40    const shuffled = shuffle(cards);
41    for (let i = 0; i < suits.length*2; i++) {
42      const tr = document.createElement("tr");
43      table.appendChild(tr);
44    //   for (let j = 0; j < 8; j++) {
45    //     const td = document.createElement("td");
46    //     td.innerHTML = shuffled[i*8+j].suit + "" + shuffled[i*8+j].num;
47    //     tr.appendChild(td);
48    //   }
49        for (let j = 0; j < 8; j++) {
50            const td = document.createElement("td");
51            td.classList.add("card", "back");
52            td.onclick = flip;  // カードをクリックしたときの関数
53            td.style.width="160px";
54            td.style.height="180px";
55            td.style.backgroundImage = `url(img/${shuffled[i * 8 + j].front})`;
56            td.style.backgroundRepeat = "no-repeat";
57            td.style.backgroundSize ="100% 100%"; 
58            tr.appendChild(td);
59        }
60    }
61  }
62  shuffleCard(); 
63
64
65    // 1枚目のカードの変数を宣言 最初はnull
66    let firstCard = null;
67    // setTimeoutを格納する変数
68    let flipTimerId = NaN;
69  
70    // カードをめくった時の処理
71    function flip(e) {
72      let filipedCard = e.target;
73      // カードにクラスbackがついていないか、flipTimerIdが動作しているとき
74      if (!filipedCard.classList.contains("back") || flipTimerId) {
75        return; //表のカードをクリックしても何も反応させない。
76      }
77    
78      filipedCard.classList.remove("back"); //backを取り除いて、カードを表にする。
79      console.log(firstCard);
80      // めくるのが1枚目の時
81      if (firstCard === null) {
82        firstCard = filipedCard; // めくったカードをfirstCardに設定
83    } else {
84        
85        console.log(firstCard.num);
86        //2枚目だったら1枚目と比較して結果を判定する。
87        if (firstCard.num === filipedCard.num) {
88          //2枚が同じだった時、firstCardを初期値に戻す
89          firstCard = null;
90          console.log("正解");
91        } else {
92          // 2枚が違う数字だった時の処理
93          flipTimerId = setTimeout(function () {
94            // 2枚のカードを裏返す
95            firstCard.classList.add("back");
96            filipedCard.classList.add("back");
97            // 初期値に戻す
98            flipTimerId = NaN;
99            firstCard = null;
100          }, 1300);  // 1.3秒後に処理を完了
101        }
102      }
103    }

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <script src="izumo.js" defer></script>
8    <link rel="stylesheet" href="izumo.css">
9    <title>チャレンジ</title>
10</head>
11<body>
12      <!-- ここに生成されます -->
13  <table class="table" border="1"></table>
14
15</body>
16</html>

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

よろしくお願いします。

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

回答2件

js
1      let filipedCard = e.target;

flippedCard や firstCard に入っているのはクリックされた <td> 要素なので、num プロパティはありません。

クリックされた要素からそこにあるカードの num を得られるようにする方法はいくつかあります。一例として、<td> を作るときtd.dataset.num = shuffled[i * 8 + j].num; のようにしておき、クリックされたときは flippedCard.dataset.num で参照することができます。

投稿2022/09/07 06:18

int32_t

総合スコア20856

ベストアンサー

正誤判定のためのカードに埋め込まれた情報を取得して比較をしたいと思っています。

CardとHTML要素の紐付け（特に、HTML要素からCardを引く）はどのように行っているのでしょうか。

ユーザーがクリックするのはHTML要素であって、Cardではありません。

投稿2022/09/07 06:09

maisumakun

総合スコア145183

kihokutarou

2022/09/07 06:31

td.Num = shuffled[i*8+j].num; でtdにプロパティを追加し、 let filipedCard = e.target; console.log(filipedCard.Num); でクリックした要素のプロパティNumを取得して if (firstCard.Num === filipedCard.Num) { 判定したらうまくいきました。指摘されると気づきますが自分で気づけませんね・・・・。ありがとうございました。

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

あなたの回答