二回目以降のクリックイベントを発火させたくない

Question

カードになるdiv要素を50個作りそれをcardsという配列に納めております。クリックして数字を取得しそれを1カウントしをcount == 1になってその値をイベントリスナーの関数内からグローバルスコープcount0に渡してあげてcount0 == 1になると二回目はクリックイベントを発生しなくなるだろうと思いました。ですが、card[0]のクリックイベントにあえてconsole.log(count0);とコードしたところカウントが1,2,3,4,5,6と反応してしまいます。これはクリックイベントが発生しているんっでしょうか？
またどのようにコードを書けば二回目以降一回限りのイベントに出来ますか？

回答宜しくお願いします

let count0 = 0;
let count1 = 0;
let count2 = 0;
let count3 = 0;
let count4 = 0;
let count5 = 0;
let count6 = 0;
let count7 = 0;
let count8 = 0;
let count9 = 0;
let count10 = 0;
let count11 = 0;
let count12 = 0;
let count13 = 0;
let count14 = 0;
let count15 = 0;
let count16 = 0;
let count17 = 0;
let count18 = 0;
let count19 = 0;
let count20 = 0;
let count21 = 0;
let count22 = 0;
let count23 = 0;
let count24 = 0;
let count25 = 0;
let count26 = 0;
let count27 = 0;
let count28 = 0;
let count29 = 0;
let count30 = 0;
let count31 = 0;
let count32 = 0;
let count33 = 0;
let count34 = 0;
let count35 = 0;
let count36 = 0;
let count37 = 0;
let count38 = 0;
let count39 = 0;
let count40 = 0;
let count41 = 0;
let count42 = 0;
let count43 = 0;
let count44 = 0;
let count45 = 0;
let count46 = 0;
let count47 = 0;
let count48 = 0;
let count49 = 0;




  if(count0 <= 0){
  cards[0].addEventListener('click',function () {console.log(count0); cards[0].textContent = wariate0; count0++; return count0;  });

  }
  if(count1 <= 0){
  cards[1].addEventListener('click',function () {cards[1].textContent = wariate1; count1++; return count1; });
  }
  if(count2 <= 0){
  cards[2].addEventListener('click',function () {cards[2].textContent = wariate2; count2++; return count2; });
  }
  if(count3 <= 0){
  cards[3].addEventListener('click',function () {cards[3].textContent = wariate3; count3++; return count3; });
  }
  if(count4 <= 0){
  cards[4].addEventListener('click',function () {cards[4].textContent = wariate4; count4++; return count4; });
  }
  if(count5 <= 0){
  cards[5].addEventListener('click',function () {cards[5].textContent = wariate5; count5++; return count5; });
  }
  if(count6 <= 0){
  cards[6].addEventListener('click',function () {cards[6].textContent = wariate6; count6++; return count6; });
  }
  if(count7 <= 0){
  cards[7].addEventListener('click',function () {cards[7].textContent = wariate7; count7++; return count7; });
  }
  if(count8 <= 0){
  cards[8].addEventListener('click',function () {cards[8].textContent = wariate8; count8++; return count8; });
  }
  if(count9 <= 0){
  cards[9].addEventListener('click',function () {cards[9].textContent = wariate9; count9++; return count9; });
  }
  if(count10 <= 0){
  cards[10].addEventListener('click',function () {cards[10].textContent = wariate10; count10++; return count10; });
  }
  if(count11 <= 0){
  cards[11].addEventListener('click',function () {cards[11].textContent = wariate11; count11++; return count11; });
  }
  if(count12 <= 0){
  cards[12].addEventListener('click',function () {cards[12].textContent = wariate12; count12++; return count12; });
  }
  if(count13 <= 0){
  cards[13].addEventListener('click',function () {cards[13].textContent = wariate13; count13++; return count13; });
  }
  if(count14 <= 0){
  cards[14].addEventListener('click',function () {cards[14].textContent = wariate14; count14++; return count14; });
  }
  if(count15 <= 0){
  cards[15].addEventListener('click',function () {cards[15].textContent = wariate15; count15++; return count15; });
  }
  if(count16 <= 0){
  cards[16].addEventListener('click',function () {cards[16].textContent = wariate16; count16++; return count16; });
  }
  if(count17 <= 0){
  cards[17].addEventListener('click',function () {cards[17].textContent = wariate17; count17++; return count17; });
  }
  if(count18 <= 0){
  cards[18].addEventListener('click',function () {cards[18].textContent = wariate18; count18++; return count18; });
  }
  if(count19 <= 0){
  cards[19].addEventListener('click',function () {cards[19].textContent = wariate19; count19++; return count19; });
  }
  if(count20 <= 0){
  cards[20].addEventListener('click',function () {cards[20].textContent = wariate20; count20++; return count20; });
  }
  if(count21 <= 0){
  cards[21].addEventListener('click',function () {cards[21].textContent = wariate21; count21++; return count21; });
  }
  if(count22 <= 0){
  cards[22].addEventListener('click',function () {cards[22].textContent = wariate22; count22++; return count22; });
  }
  if(count23 <= 0){
  cards[23].addEventListener('click',function () {cards[23].textContent = wariate23; count23++; return count23; });
  }
  if(count24 <= 0){
  cards[24].addEventListener('click',function () {cards[24].textContent = wariate24; count24++; return count24; });
  }
  if(count25 <= 0){
  cards[25].addEventListener('click',function () {cards[25].textContent = wariate25; count25++; return count25; });
  }
  if(count26 <= 0){
  cards[26].addEventListener('click',function () {cards[26].textContent = wariate26; count26++; return count26; });
  }
  if(count27 <= 0){
  cards[27].addEventListener('click',function () {cards[27].textContent = wariate27; count27++; return count27; });
  }
  if(count28 <= 0){
  cards[28].addEventListener('click',function () {cards[28].textContent = wariate28; count28++; return count28; });
  }
  if(count29 <= 0){
  cards[29].addEventListener('click',function () {cards[29].textContent = wariate29; count29++; return count29; });
  }
  if(count30 <= 0){
  cards[30].addEventListener('click',function () {cards[30].textContent = wariate30; count30++; return count30; });
  }
  if(count31 <= 0){
  cards[31].addEventListener('click',function () {cards[31].textContent = wariate31; count31++; return count31; });
  }
  if(count32 <= 0){
  cards[32].addEventListener('click',function () {cards[32].textContent = wariate32; count32++; return count32; });
  }
  if(count33 <= 0){
  cards[33].addEventListener('click',function () {cards[33].textContent = wariate33; count33++; return count33; });
  }
  if(count34 <= 0){
  cards[34].addEventListener('click',function () {cards[34].textContent = wariate34; count34++; return count34; });
  }
  if(count35 <= 0){
  cards[35].addEventListener('click',function () {cards[35].textContent = wariate35; count35++; return count35; });
  }
  if(count36 <= 0){
  cards[36].addEventListener('click',function () {cards[36].textContent = wariate36; count36++; return count36; });
  }
  if(count37 <= 0){
  cards[37].addEventListener('click',function () {cards[37].textContent = wariate37; count37++; return count37; });
  }
  if(count38 <= 0){
  cards[38].addEventListener('click',function () {cards[38].textContent = wariate38; count38++; return count38; });
  }
  if(count39 <= 0){
  cards[39].addEventListener('click',function () {cards[39].textContent = wariate39; count39++; return count39; });
  }
  if(count40 <= 0){
  cards[40].addEventListener('click',function () {cards[40].textContent = wariate40; count40++; return count40; });
  }
  if(count41 <= 0){
  cards[41].addEventListener('click',function () {cards[41].textContent = wariate41; count41++; return count41; });
  }
  if(count42 <= 0){
  cards[42].addEventListener('click',function () {cards[42].textContent = wariate42; count42++; return count42; });
  }
  if(count43 <= 0){
  cards[43].addEventListener('click',function () {cards[43].textContent = wariate43; count43++; return count43; });
  }
  if(count44 <= 0){
  cards[44].addEventListener('click',function () {cards[44].textContent = wariate44; count44++; return count44; });
  }
  if(count45 <= 0){
  cards[45].addEventListener('click',function () {cards[45].textContent = wariate45; count45++; return count45; });
  }
  if(count46 <= 0){
  cards[46].addEventListener('click',function () {cards[46].textContent = wariate46; count46++; return count46; });
  }
  if(count47 <= 0){
  cards[47].addEventListener('click',function () {cards[47].textContent = wariate47; count47++; return count47; });
  }
  if(count48 <= 0){
  cards[48].addEventListener('click',function () {cards[48].textContent = wariate48; count48++; return count48; });
  }
  if(count49 <= 0){
  cards[49].addEventListener('click',function () {cards[49].textContent = wariate49; count49++; return count49; });
  }

Comments

[yambejp]

cards配列の説明がないので何をしたいかわかりません。
説明が長すぎるの動作は3～4個書けば十分でしょう

Answer 1

document でイベントを管理すべきです。
1度だけならカウントする必要もありません。

<body>
<table id="T"></table>
  
<script>
//ここはどうでもよい
const aryTB = (a, tbody=document.createElement('tbody'))=>a.reduce((a,b)=>(b.reduce((c,d)=>(c.insertCell().textContent=d,c),a.insertRow()),a),tbody);
T.appendChild (aryTB ([[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0]]));
const cards = [...T.querySelectorAll ('td')], wariate = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];

//___________________
//質問の回答はここから

const A = new Set;

function handler (event) {
  let e = event.target, i = cards.indexOf (e);
  if (-1 < i)
   if (! A.has (e))
    ((e.textContent = wariate[i]), A.add (e));
}
document.addEventListener ('click', handler, false); 


</script> 

骨格としてはこんな感じ。実験用として数字をあえて表示しています。
同じ数字を２つクリックするとそれらが消えていきます。
まずは流れを理解するところから。

<!DOCTYPE html><html>
<head><meta charset="UTF-8">
<style>
#D div {
  display: inline-block;
  border: 1px green solid;
  width: 30px;
  height: 30px;
  text-align: center;
}
</style>
<body>
<div id="D"></div>
<script> 

const
  N = 25,
  NIGO = [...Array(N).keys(), ...Array(N).keys()],
  LEN = NIGO.length,
  R = n=> Math.random () * n|0;

[...D.children].forEach (e=> e.remove ());
let template = document.createElement ('div');
template.classList.add ('card');

for (let n of NIGO) {
  let d = D.appendChild (template.cloneNode (true));
  d.dataset.num = n;
  d.textContent = n;//これは必要ない
}

for (let i = LEN; i; i--)
  D.appendChild (D.children[R(i)]);

let p;
function handler (event) {
  let e = event.target;
  if (! p) return p = e;
  if (p == e) return;
  if (p.dataset.num == e.dataset.num) {
    p.remove ();
    e.remove ();
  }
  p = null;
}

D.addEventListener('click', handler, false);　


</script>

Comments

[irebasunglass]

回答ありがとうございます。
後で自分の質問を見返したところ情報の不備がございました。
実は神経衰弱が作りたく乗せるコードを正しく厳選したつもりが
大事な部分が抜けておりました。同じ数字のカード引くとその二組カードremove.childでけすという処理を最終的にしたかったので、同じカードを２回クリック
できなくしようとしました。コードでは、

var card_zone = document.createElement('div');

card_zone.classList.add('card_zone');

document.body.appendChild(card_zone);

var cards = [], nums = [];

var ni_go = new Array();

ni_go.push(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24);　//2組の0から24の数字

function card_action (){

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

var card = document.createElement('div');

card.classList.add('card');

card_zone.appendChild(card);

cards.push(card);

}

ni_go.sort(() => Math.random() - 0.5);

return card_action;

}

var card = card_action();　
という大事なところが最初に入ってませんでした。

babu_babu_baboo様に回答をいただいた後、

var card_zone = document.createElement('div');

card_zone.classList.add('card_zone');

document.body.appendChild(card_zone);

var cards = [];

var ni_go = new Array();

ni_go.push(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24);

function card_action (){

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

var card = document.createElement('div');

card.classList.add('card');

card_zone.appendChild(card);

cards.push(card); //cards[0]からcards[49]までを作る

}

ni_go.sort(() => Math.random() - 0.5);

return card_action;

}

var card = card_action();

const A = new Set;

function card_action2 (event) {

j = cards.indexOf(); //カードの0から49の番号を返す？
if(-1 < j)　//cards50枚いずれも0から49の値がが存在するのでtrue
if (! A has(j)) { //Aは空なのでこれもtrue

cards.textContent = ni_go.shift(); A.add (j); // cardsは数字を取得しAにはクリックしたカードの番号を格納する。
それ以降はクリックした番号のカードは発火されない

}

}

document.addEventListener('click', card_action2,false);　

という解釈をしましたが"Uncaught SyntaxError: Unexpected identifier"というエラー出ました。

私の記載漏れで申し訳ございません。

よろしければもう一度ご回答いただけますでしょうか。

[babu_babu_baboo]

質問は再編集できるのだからそちらにインデント付きで掲載してください。

[irebasunglass]

再度回答ありがとうございました。後日、質問自体を再編集いたします。とても参考になりました。ありがとうございました。

Answer 2

回答じゃないけど、
countを配列にすれば、コード並べなくてもループ回せば済みますよ

---

addEventListenerって、イベントの実行関数を登録するってことなんで、そこで２回め判定してもなんにもなりません。
そこで判定するんじゃなくて、イベントの実行関数の中で２回め判定して、２回目以降ならそのまま戻るってことをすればよろしい

Comments

[irebasunglass]

回答ありがとうございます。配列にしてみたいと思います。