JS 画像の表示 繰り返さない

Question

JSで神経衰弱を作成しています。
数字が揃っていたら画面から消えるという機能をつけていますが、消えた後にもう一度押すと再度トランプが表示されてしまいます。
消えた後に押してもなにも出てこない、そのままの状態にしたいと思っているのですがうまくいかないので教えていただけたら嬉しいです。

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);
let count = 0;


for (var i = 0;i < 4; i++){
  var tr1 = document.createElement("tr");
  for(var a = 0;a < 13; a++){
    var td1 = document.createElement("td");
    tr1.appendChild(td1);
    td1.id = "card" + [i*13+a];
    td1.innerHTML =  "<img src=" + image +  ">";
  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;
}



var list = [];
var click = [];

for (let i = 0; i < cards.length; i ++){
  var elem2 = document.getElementById("card" + i);
  elem2.addEventListener("click",function(){
    count++;
    var str = td1.innerHTML;
    var nstr1 = str.replace(image,shuffle[i]);
    var display1 = document.getElementById("card" + i);
    display1.innerHTML = nstr1;
    list.push(display1);
    click.push(shuffle[i]);
    console.log(display1);
    if(display1 === ""){
      console.log("aaa");
    }
    else if(list[0] === list[1]){
      list.shift();
      console.log(list);
    }else if(list.length === 2) {
      var slice = click.slice(-2);
      var slice1 = slice[0].slice(-6);
      var slice3 = slice[0].slice(10,11);
      var slice2 = slice[1].slice(-6);
      var slice4 = slice[1].slice(10,11);
      if(slice1 === slice2 && slice3 !== slice4){
        console.log("数字一緒");
        console.log(slice);
        console.log(list);
        list[0].querySelector("img").src = "";
        list[1].querySelector("img").src = "";
        list = [];
      }else if(slice1 !== slice2){
        console.log("数字違う");
        var cnt = 0;
        var timer = setInterval(test,1000);
        function test(){
          cnt ++;
          if(cnt === 1){
            clearInterval(timer);
            list[0].querySelector("img").src = image;
            list[1].querySelector("img").src = image;
            list = [];
          }
        }
      }
    }else if(list.length >= 2){
      var slice = click.slice(-3);
      if(slice[0] === slice[1] || slice[0] === slice[2]){
      }else if(slice[1] !== slice[2]){
        var str = td1.innerHTML;
        var nstr1 = str.replace(shuffle[i],image);
        var display1 = document.getElementById("card" + i);
        display1.innerHTML = nstr1;
      }
    }   
  })
}

Answer 1

カードを消したときに<img src= を空にしているようですので、 display1.querySelector("img").getAttribute("src") == "" をチェックして何もしなければよいでしょう。

---

src を空にするより、何か class を付けて CSS で非表示にしたほうが応用しやすいと思います。その方法だと消す様子をアニメーションにするとか簡単にできますよ。
例:

• カードを消す: list[0].classList.add('hidden');
• 消えているカードのチェック: if (display1.classList.contains('hidden'))
• 消すスタイル: <style> .hidden { opacity:0; transition:all 0.5s ease; }</style>

Comments

[bskbbbggg]

回答ありがとうございます。ただ私のチェックする場所が悪いのか実現できないので再度質問させていただきたいです。
カードを押された時にdisplay1.querySelector("img").getAttribute("src") == ""
ならなにもしないのでクリックされたときの一番上が最適だと思いクリックイベントの一番上にコードを持ってきました。ですが反応がないので私のコードを書いた場所が悪いと思っています。どこが最適なのか教えていただけたらありがたいです。
CSSに関してはJSの学習がひと段落着いたらと思っていましたので、今後の参考にさせていただきます。より便利で使いやすいものの勉強材料ありがとうございます。

var elem2 = document.getElementById("card" + i);
elem2.addEventListener("click",function(){
count++;
var str = td1.innerHTML;
var nstr1 = str.replace(img,shuffle[i]);
var display1 = document.getElementById("card" + i);
display1.innerHTML = nstr1;
list.push(display1);
click.push(shuffle[i]);
if(display1.querySelector("img").getAttribute("src") == "") {
console.log("aaa");
}
if(list[0] === list[1]){
list.shift();
console.log(list);
}else if(list.length === 2) {
var slice = click.slice(-2);
var slice1 = slice[0].slice(-6);
var slice3 = slice[0].slice(10,11);
var slice2 = slice[1].slice(-6);
var slice4 = slice[1].slice(10,11);
if(slice1 === slice2 && slice3 !== slice4){
console.log("数字一緒");
list[0].querySelector("img").src = "";
list[1].querySelector("img").src = "";
list = [];
}else if(slice1 !== slice2){
console.log("数字違う");
var cnt = 0;
var timer = setInterval(test,1000);
function test(){
cnt ++;
if(cnt === 1){
clearInterval(timer);
list[0].querySelector("img").src = img;
list[1].querySelector("img").src = img;
list = [];
}
}
}
}else if(list.length >= 2){
var slice = click.slice(-3);
if(slice[0] === slice[1] || slice[0] === slice[2]){
}else if(slice[1] !== slice[2]){
var str = td1.innerHTML;
var nstr1 = str.replace(shuffle[i],img);
var display1 = document.getElementById("card" + i);
display1.innerHTML = nstr1;
}
}
})
}

[int32_t]

if(display1.querySelector("img").getAttribute("src") == "") {
console.log("aaa");
}

この if の中で return しましょう。
でないと、下に続くコードも実行します。

[bskbbbggg]

さらに質問失礼します。
おっしゃられた通りにこのif文の中でreturnをしたのですが、うまくいかないようです。他にもこうした方がいいということがあれば教えていただきたいです。
for (let i = 0; i < cards.length; i ++){
var elem2 = document.getElementById("card" + i);
elem2.addEventListener("click",function(){
count++;
var str = td1.innerHTML;
var nstr1 = str.replace(img,shuffle[i]);
var display1 = document.getElementById("card" + i);
display1.innerHTML = nstr1;
list.push(display1);
click.push(shuffle[i]);
console.log(display1.querySelector("img").getAttribute("src"));
if(display1.querySelector("img").getAttribute("src") == "") {
console.log("aaa");
return;
}
else if(list[0] === list[1]){
list.shift();
console.log(list);
}else if(list.length === 2) {
var slice = click.slice(-2);
var slice1 = slice[0].slice(-6);
var slice3 = slice[0].slice(10,11);
var slice2 = slice[1].slice(-6);
var slice4 = slice[1].slice(10,11);
if(slice1 === slice2 && slice3 !== slice4){
console.log("数字一緒");
list[0].querySelector("img").src = "";
list[1].querySelector("img").src = "";
console.log(list[0]);

list = [];
}else if(slice1 !== slice2){
console.log("数字違う");
var cnt = 0;
var timer = setInterval(test,1000);
function test(){
cnt ++;
if(cnt === 1){
clearInterval(timer);
list[0].querySelector("img").src = img;
list[1].querySelector("img").src = img;
list = [];
}
}
}
}else if(list.length >= 2){
var slice = click.slice(-3);
if(slice[0] === slice[1] || slice[0] === slice[2]){
}else if(slice[1] !== slice[2]){
var str = td1.innerHTML;
var nstr1 = str.replace(shuffle[i],img);
var display1 = document.getElementById("card" + i);
display1.innerHTML = nstr1;
}
}
})
}

[int32_t]

おっと見落としてました。最初の方の「display1.innerHTML = nstr1;」よりも前にチェックする必要があります。

[bskbbbggg]

ありがとうございます。
解決できました。