css3+ECMAScriptで数合わせ(神経衰弱)を作ろうとしたら、上手く行かない〜。自動生成したdiv要素にaddEventListener内で、1枚目のカードを指定するでエラーになる！

分からんなら、放置して違う方法

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JavaScript Practice</title>
  <style>
    body {
      display: flex;
      flex-wrap: wrap;
    }
    .card {
      width: 100px;
      height: 100px;
      background: skyblue;
      cursor: pointer;
      transition: 0.8s;
      margin: 0 8px 8px 0;
      text-align: center;
      line-height: 100px;
      user-select: none;
    }
    .open_card{
      background: pink;
      border-radius: 50%;
      transform: rotate(360deg);
    }

    .open_success{
      background: lightgreen;
      border-radius: 50%;
      transform: rotate(360deg);
    }

  </style>
</head>
<body>

  <script>
    'use strict';
    // 同じ番号のカードを2枚ずつ生成。
    const card_num = 10;
    let card = [];
    for(let i=0; i<(card_num/2); i++){
      card[i] = i;
      card[(card_num-1) - i] = i;
    }
    // [0, 1, 2, 3, 4, 4, 3, 2, 1, 0]
    console.log(card);

    // カードをシャッフル。Fisher–Yates(フィッシャー・イェーツ)アルゴリズムを用いる方法
    // カード枚数だけ入れ替えをする。後ろから1枚ずつ(num-1,num-2,num-3...2,1,0)
    for(let i = card.length - 1; i > 0; i--) {
        // 交換するカードを、ランダムで決定      
        var i_change = Math.floor(Math.random() * (i + 1));
        // 対象のカード2枚を、入れ替える(分割代入)
        [card[i], card[i_change]] = [card[i_change], card[i]] ;
    }
    console.log(card);

    let winner = 0;
    let open_card = null;

    // 以下を繰り返す。
    // めくられているカード0枚 = 初期状態
    // めくられているカード1枚 = 1枚目のカードをめくっている
    // めくられているカード2枚 = 1枚目のカードと比較して、同じかどうかの判定

    for (let i = 0; i < card_num; i++) {
      // カードを生成
      const div = document.createElement('div');
      div.classList.add('card');
      // indexをカードIDにする
      div.id = i;
      div.textContent = card[i];
      
      // クリックされたらカードをめくる
      div.addEventListener('click', (open_card) => {
        console.log(open_card);
        div.classList.add('open_card');

        // 1枚をめくる
        if(open_card == null){
          open_card = card[i];
          console.log('first card ' + card[i] );
        // 二枚目をめくって同じなら
        }else if(open_card == card[i]){
          // めくったカード2枚の色を変える。
          div.classList.add('open_success');
          document.getElementById(open_card).classList.add('open_success');
          // 1枚目のカードをリセット
          open_card = null;
          console.log('second good ' + card[i] );
        // 外れだったら
        }else{
          // 2枚目がめくり終わるまで、待ってから
          div.addEventListener('transitionend', function(open_card) {
            // めくったカード2枚の色を変える。
            div.classList.remove('open_card');
            
            document.getElementById(open_card).classList.remove('open_card');
            open_card = null;
            console.log('second bad ' + card[i] );
          });

        }
      });
      document.body.appendChild(div);
    }
  </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

<!DOCTYPE html>

<head>

<title>JavaScript Practice</title>

<style>

body {

display: flex;

flex-wrap: wrap;

}

.card {

width: 100px;

height: 100px;

background: skyblue;

cursor: pointer;

transition: 0.8s;

margin: 0 8px 8px 0;

text-align: center;

line-height: 100px;

user-select: none;

}

.open_card{

background: pink;

border-radius: 50%;

transform: rotate(360deg);

}

.open_success{

background: lightgreen;

border-radius: 50%;

transform: rotate(360deg);

}

</style>

</head>

<body>

'use strict';

// 同じ番号のカードを2枚ずつ生成。

const card_num = 10;

let card = [];

for(let i=0; i<(card_num/2); i++){

card[i] = i;

card[(card_num-1) - i] = i;

}

// [0, 1, 2, 3, 4, 4, 3, 2, 1, 0]

console.log(card);

// カードをシャッフル。Fisher–Yates(フィッシャー・イェーツ)アルゴリズムを用いる方法

// カード枚数だけ入れ替えをする。後ろから1枚ずつ(num-1,num-2,num-3...2,1,0)

for(let i = card.length - 1; i > 0; i--) {

// 交換するカードを、ランダムで決定

var i_change = Math.floor(Math.random() * (i + 1));

// 対象のカード2枚を、入れ替える(分割代入)

[card[i], card[i_change]] = [card[i_change], card[i]] ;

}

console.log(card);

let winner = 0;

let open_card = null;

// 以下を繰り返す。

// めくられているカード0枚 = 初期状態

// めくられているカード1枚 = 1枚目のカードをめくっている

// めくられているカード2枚 = 1枚目のカードと比較して、同じかどうかの判定

for (let i = 0; i < card_num; i++) {

// カードを生成

const div = document.createElement('div');

div.classList.add('card');

// indexをカードIDにする

div.id = i;

div.textContent = card[i];

// クリックされたらカードをめくる

div.addEventListener('click', (open_card) => {

console.log(open_card);

div.classList.add('open_card');

// 1枚をめくる

if(open_card == null){

open_card = card[i];

console.log('first card ' + card[i] );

// 二枚目をめくって同じなら

}else if(open_card == card[i]){

// めくったカード2枚の色を変える。

div.classList.add('open_success');

document.getElementById(open_card).classList.add('open_success');

// 1枚目のカードをリセット

open_card = null;

console.log('second good ' + card[i] );

// 外れだったら

}else{

// 2枚目がめくり終わるまで、待ってから

div.addEventListener('transitionend', function(open_card) {

// めくったカード2枚の色を変える。

div.classList.remove('open_card');

document.getElementById(open_card).classList.remove('open_card');

open_card = null;

console.log('second bad ' + card[i] );

});

}

});

document.body.appendChild(div);

}

</script>

</body>

</html>

関連記事