JavaScriptでビンゴシートに機能を実装したい

前提・実現したいこと

ドットインストール「JavaScriptでビンゴシートを作ろう！」にて作ったビンゴシートに以下の機能を実装しようとしています。
・数字をクリックするとクラス（opened)を追加し色が変わる。
・シャッッフルボタンをクリックすると数字をシャッフルする。
・「カードを決定する」ボタンをクリックするとシャッフルボタンが無効化される。

発生している問題・エラーメッセージ

ページ再読み込み後、数字をクリックすると色が変わるが、一度でもシャッフルしてしまうと数字の色が変わらなってしまいます。
何度シャッフルしてもクリックして色が変わるようにしたいのですが上手くいきません。

該当のソースコード

長くなってしまいますが全コードを追記させていただきました。

HTML
1<body>
2  <table>
3    <thead>
4      <tr><th>B</th><th>I</th><th>N</th><th>G</th><th>O</th></tr>
5    </thead>
6    <tbody>
7      
8    </tbody>
9  </table>
10
11  <div id="refresh">カードをシャッフル</div>
12
13  <div id="lock">カードを決定する</div>
14
15  <script src="js/main.js">
16  </script>
17</body>

CSS
1body {
2  font-family: 'Courier New' , monospace;
3  user-select: none;
4}
5
6table {
7  margin: 15px auto;
8}
9
10th, td {
11  width: 60px;
12  height: 60px;
13  text-align: center;
14  line-height: 60px;
15}
16th {
17  font-size: 24px;
18  font-weight: bold;
19}
20td {
21  background-color: orange;
22  border: 2px solid orange;
23  border-radius: 5px;
24  cursor: pointer;
25  transition: 0.5s;
26}
27
28.opened {
29  background-color: white;
30  border-radius: 50%;
31  transform: rotateX(360deg);
32}
33
34#refresh {
35  height: 40px;
36  width: 200px;
37  background-color: lightsalmon;
38  border-radius: 10px;
39  box-shadow: 0 5px salmon;
40  margin: 40px auto;
41  text-align: center;
42  line-height: 40px;
43  cursor: pointer;
44  user-select: none;
45}
46#refresh:hover {
47  opacity: 0.8;
48}
49#refresh:active {
50  transform: translate(0, 5px);
51  box-shadow: none;
52  opacity: 1;
53}
54
55#lock {
56  height: 40px;
57  width: 200px;
58  background-color: lightgreen;
59  border-radius: 10px;
60  margin: 20px auto;
61  text-align: center;
62  line-height: 40px;
63  cursor: pointer;
64  user-select: none;
65}
66
67.inactive {
68  opacity: 0.5 !important;
69  background-color: #777 !important;
70  box-shadow: 0 5px #444 !important;
71  pointer-events: none !important;
72}
73
74.active {  
75  background-color: green !important;
76}

JavaScript
1'use strict';
2
3{
4  function createColumn(col) {
5    const source = [];
6    for (let i = 0; i < 15; i++){
7      source[i] = i + 1 + 15 * col;
8    }
9  
10    const column = [];
11    for (let i = 0; i < 5; i++){
12      column[i] = source.splice (Math.floor(Math.random() * source.length), 1)[0];
13    }
14  
15    return column;
16  }
17
18  function createColumns(){
19    const columns = [];    
20    for (let i = 0; i < 5; i++){
21      columns[i] = createColumn(i);
22    }
23
24    columns[2][2] = 'FREE';
25    return columns;
26  }
27
28  function renderBingo(columns){
29    const tbody = document.querySelector('tbody')
30
31    while(tbody.firstChild) {
32      tbody.removeChild(tbody.firstChild);
33    }
34
35    for (let row = 0; row < 5; row++){
36      const tr = document.createElement('tr');
37      for (let col = 0; col < 5; col++){
38        const td = document.createElement('td');
39        td.textContent = columns[col][row];
40        tr.appendChild(td); 
41      }
42      document.querySelector('tbody').appendChild(tr);
43    }
44  }
45  
46  const columns = createColumns();
47  renderBingo(columns);
48
49  
50  const refresh = document.getElementById('refresh');
51  const lock = document.getElementById('lock');
52  
53  refresh.addEventListener('click', () => {
54    const columns = createColumns();
55    renderBingo(columns);
56  });
57  
58  lock.addEventListener('click', () => {
59    refresh.classList.toggle('inactive');
60    lock.classList.toggle('active');
61    if(lock.classList.contains('active') === true){
62      lock.textContent = 'カードを変更する';
63    }else{
64      lock.textContent = 'カードを決定する';
65    }
66    
67  });
68
69  const td = document.querySelectorAll('td');
70
71  for (let i = 0; i < 25; i++) {
72    td[i].addEventListener('click', ()=>{
73      td[i].classList.toggle('opened');
74    });
75  }
76}

試したこと

最初に表示されている25マスが[0]〜[24]で、１度シャッフルすると[25]〜[49]になってしまうのではないかと思い、for文内の　i < 25 を i < 100 などに変更して、一度だけシャッフルしてみたが動作しませんでした。
コンソール上にエラーは表示されていません。

プログラミング学習を初めて２ヶ月ほどの初心者で無知ではありますが、よろしくお願い致します。

kei344

2020/07/14 13:01

書かれている状況が再現するコード（HTML/CSS/JavaScript）を質問文に追記されたほうが回答を得やすいと思います。※ コードはコードブロックで質問文に追記してください。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答2件

ベストアンサー

下記部分を関数renderBingoの最後に移動する。

js
1  const td = document.querySelectorAll('td');
2
3  for (let i = 0; i < 25; i++) {
4    td[i].addEventListener('click', ()=>{
5      td[i].classList.toggle('opened');
6    });
7  }
8```**動くサンプル：**[https://jsfiddle.net/eodnqktw/](https://jsfiddle.net/eodnqktw/)

投稿2020/07/15 15:16

kei344

総合スコア69606

KennyGoto

2020/07/18 23:56

上手く行きました！全コードを載せた方がいいとご指摘も頂き、ありがとうございました。はじめての質問でしたが本当に助かりました！

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

javascript
1<style>
2#t1 th,#t1 td{
3width:50px;
4height:50px;
5background-Color:orange;
6}
7</style>
8<script>
9const list={
10b:new Array(15).fill(null).map((x,y)=>y+1),
11i:new Array(15).fill(null).map((x,y)=>y+16),
12n:new Array(15).fill(null).map((x,y)=>y+31),
13g:new Array(15).fill(null).map((x,y)=>y+46),
14o:new Array(15).fill(null).map((x,y)=>y+61),
15};
16const shuffle=()=>{
17  ["b","i","n","g","o"].forEach(x=>{
18    list[x]=list[x].map(x=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
19  });
20}
21const setText=()=>{
22  const cells=document.querySelectorAll('#t1 td');
23  for(var i=0;i<5;i++){
24    cells[i*5  ].textContent=list.b[i];
25    cells[i*5+1].textContent=list.i[i];
26    cells[i*5+2].textContent=i==2?"Free":list.n[i];
27    cells[i*5+3].textContent=list.g[i];
28    cells[i*5+4].textContent=list.o[i];
29  }
30}
31window.addEventListener('DOMContentLoaded', ()=>{
32  shuffle();
33  setText();
34  document.querySelector('#shuffle').addEventListener('click',()=>{
35    shuffle();
36    setText();
37  });
38  document.querySelector('#determine').addEventListener('click',()=>{
39    document.querySelector('#shuffle').disabled=true;
40  });
41});
42
43</script>
44<table id="t1">
45<thead>
46<tr>
47<th>B</th>
48<th>I</th>
49<th>N</th>
50<th>G</th>
51<th>O</th>
52</tr>
53</thead>
54<tbody>
55<tr>
56<td></td>
57<td></td>
58<td></td>
59<td></td>
60<td></td>
61</tr>
62<tr>
63<td></td>
64<td></td>
65<td></td>
66<td></td>
67<td></td>
68</tr>
69<tr>
70<td></td>
71<td></td>
72<td></td>
73<td></td>
74<td></td>
75</tr>
76<tr>
77<td></td>
78<td></td>
79<td></td>
80<td></td>
81<td></td>
82</tr>
83<tr>
84<td></td>
85<td></td>
86<td></td>
87<td></td>
88<td></td>
89</tr>
90</tbody>
91</table>
92<button id="shuffle">カードをシャッフル</button>
93<button id="determine">カードを決定</button>
94