js クリックイベント

Question

現在JSを学習していて神経衰弱を作ろうと思っています。
ボタンを押したら、押された画像が切り替わる機能を付けようと思っているのですが、なかなかできないので質問させていただきました。
質問したいことが２点あります。
・現在５２枚あるカードに対して idをそれぞれ渡しているコードを書いているのですがカードの一枚目だけidがnullとなってしまっているので一枚目にもidを渡したい。
（私の理解としては一枚目にはid = "card0"となっていると思っていました。）
・５２枚のカードをクリックするとカードが切り替わる機能を付けたいのですが、現在書いているコードだとエラーが出てしまいうまくいかない。押したところのidをうまく取得できていないのでエラーがでている。もしくはdocument.getElementByIdのid名がおかしいのどちらかかなとは考えています。ただどうしたらいいのかがわからなかったので教えていただきたいです。

var cards = ["../images/001.png","../images/002.png","../images/003.png","../images/004.png","../images/005.png",
"../images/006.png","../images/007.png","../images/008.png","../images/009.png","../images/010.png",
"../images/011.png","../images/012.png","../images/013.png",
"../images/101.png","../images/102.png","../images/103.png","../images/104.png","../images/105.png",
"../images/106.png","../images/107.png","../images/108.png","../images/109.png",
"../images/110.png","../images/111.png","../images/112.png","../images/113.png",
"../images/201.png","../images/202.png","../images/203.png","../images/204.png","../images/205.png",
"../images/206.png","../images/207.png","../images/208.png","../images/209.png","../images/210.png",
"../images/211.png","../images/212.png","../images/213.png",
"../images/301.png","../images/302.png","../images/303.png","../images/304.png","../images/305.png","../images/306.png",
"../images/307.png","../images/308.png","../images/309.png","../images/310.png","../images/311.png","../images/312.png","../images/313.png",
];
var image = "../images/trump_back.jpg";
var shuffle = arrayShuffle(cards);


for (var i = 0;i < 4; i++){
  var tr1 = document.createElement("tr");
  for(var a = 0;a < 13; a++){
    console.log(a);
    var td1 = document.createElement("td");
    tr1.appendChild(td1);
    td1.id = "card" + [i*13+a+1];
    console.log(document.getElementById("card" + [i*13+a]));
    td1.innerHTML = "<img src=" + shuffle[i*13+a] +  ">";
    td1.innerHTML =  "<img src=" + image +  ">";
    var str = td1.innerHTML;
  document.getElementById("wrap").appendChild(tr1);
  }
}
function arrayShuffle(array) {
  for(var i = (array.length - 1); 0 < i; i--){

    var r = Math.floor(Math.random() * (i + 1));
  
    var tmp = array[i];

    array[i] = array[r];

    array[r] = tmp;

  }
  return array;
}
for (var i = 0; i < cards.length; i ++){
  console.log("card"+[i]);
  var elem2 = document.getElementById("card"+[i]);
  elem2.addEventListener("click",function(){
    var nstr = str.replace(image,"../images/001.png");
    var display1 = document.getElementById("card"+[i])
    display1.innerHTML = nstr;
  })
}

Answer 1

[i * 13 + a + 1]を[i * 13 + a]に

---

コメントを受けて追記

for (var→for (let
以下を参照。
よくある間違い: ループ内でクロージャを作成する | クロージャ - JavaScript | MDN

Comments

[bskbbbggg]

回答ありがとうございます。
一点目のidを渡すことは実現できました。ありがとうございます。
差し支えなければもう一点のカードをクリックしたら、押したカードが切り替わるという内容も回答いただけるとありがたいです。
個人的には下から２行目の
var display1 = document.getElementById("card"+[i])
のIDが取得できていないのでうまくいっていないと思っています。
見当違いかもしれないですが、教えていただけたら幸いです

[bskbbbggg]

回答ありがとうございます。
var と　let　の違いにはまだまだ気づいていませんでした。
これからもっと理解を深めていきます。
ありがとうございます。

Answer 2

ページを表示した状態で、ブラウザの開発者ツールを開いてどんなテーブルができているか確認してみましょう。
<td id="card1" ...> から <td id="card52" ...> が確認できると思います。

for (var i = 0; i < cards.length; i ++){
  console.log("card"+[i]);
  var elem2 = document.getElementById("card"+[i]);

このコードは、 card0 から card51 にアクセスしようとしています。

このあたりの情報から原因を考えてみてはいかがでしょうか。

Comments

[bskbbbggg]

回答ありがとうございます。
２重のfor文のところを[i * 13 +a]と変更してcard0からcard51までのアクセスはできたと思います。
ただ 押したら画像が切り替わる機能の部分でコンソールにnullが表示されるので画像が表示されないという問題も見つかりました。
何度か修正を試みたのですが、検討がつかないので
こちらはどうしたらいいのか教えていただけないでしょうか。
何から何まで頼ってしまい申し訳ありません。
var display1 = document.getElementById("card" + i);
console.log(display1);
// display1.innerHTML = nstr1;

[int32_t]

var i を let i に変えてみてください。

[int32_t]

今は原則 var は使わない方がよいです。

[bskbbbggg]

回答ありがとうございます。
普段からvar をつかうことが癖になっているのでvar と　let の違いがわからないのが現状です。
これからどんどん調べていき、このくらいではつまづかないように精進します。

[kokemaru3]

..