数字(テーブルセル)をクリックした際に、数字の背景が灰色になる処理を記述したい

JavaScriptでビンゴゲームを作っています。数字(テーブルセル)をクリックした際に、数字の背景が灰色になる処理を記述したいのですが、いまいち方法がわかりません。

ネット等で、(JavaScript　テーブルセル押す　色が変わる）のように調べ、コードを読んだりして見たのですが、なぜこのコードが使われているのかといった疑問点が多く、よくわからない状態です。何かヒントのようなものがあれば、ご教授願いたいです。

HTML
1<DOCTYPE heml>
2  <html lang ="ja">
3<head>
4 <meta chaset="utf-8">
5 <title>ビンゴゲーム!</title>
6<link rel="stylesheet" href="styles.css">
7</head>
8<body>
9  <div id="container">
10  <table>
11    <tr>
12      <th>B</th><th>I</th><th>N</th><th>G</th>
13      <th>O</th>
14    </tr>
15    <tr>
16     <td>1</td>
17     <td>2</td>
18     <td>48</td>
19     <td>5</td>
20     <td>69</td>
21   </tr>
22   <tr>
23    <td>5</td>
24    <td>6</td>
25    <td>7</td>
26    <td>8</td>
27    <td>9</td>
28   </tr>
29   <tr>
30    <td>7</td>
31    <td>22</td>
32    <td>SPACE</td>
33    <td>49</td>
34    <td>62</td>
35   </tr>
36   <tr>
37    <td>13</td>
38    <td>28</td>
39    <td>33</td>
40    <td>46</td>
41    <td>63</td>
42   </tr>
43   <tr>
44    <td>3</td>
45    <td>27</td>
46    <td>32</td>
47    <td>44</td>
48    <td>73</td>
49   </tr>
50 </table>
51 <h1>番号は・・・</h1>
52
53
54
55  <div class="main" id='main'></div>
56  <button id='btn'>スタート</button>
57
58 <h2>すでに出た数字</h2>
59<div id="history"></div>
60<script src="js/main.js" ></script>
61</body>![イメージ説明](141f36206469356052c4e71487a339db.png)
62</html>

JavaScript
1const MAX_NUMBER = 75;
2let main = document.getElementById('main');
3let button = document.getElementById('btn');
4let history = document.getElementById('history');
5
6
7
8let historyArray = [];
9let targetNumber = [];
10for(let i = 1; i <= MAX_NUMBER; i++){
11  targetNumber.push(i);
12}
13
14let timerId;
15
16button.onclick = () => {
17
18  if(targetNumber.length === 0){
19    alert('すべての番号の発表が終わりました') ;
20    clearInterval(timerId);
21    return;
22  }
23  
24  if(button.textContent === 'スタート'){
25    button.textContent = 'ストップ';
26    timerId = setInterval( () => {
27      let targetIndex = Math.floor(Math.random() * targetNumber.length) ;  
28      main.textContent = targetNumber[targetIndex];
29    }, 100)
30  }else{
31    button.textContent = 'スタート';
32    clearInterval(timerId); 
33    let targetIndex = targetNumber.indexOf(Number(main.textContent));   
34    targetNumber.splice(targetIndex, 1);
35    historyArray.push(main.textContent);
36    history.textContent = historyArray;
37  }
38}
39$(function() {
40  $("td").click(function() {
41       // 現在のセルの色が無色透明かを判別
42       if($(this).css("background-color")=="rgba(0, 0, 0, 0)") {
43            // 赤色に染める
44            $(this).css("background-color", "red");
45       } else {
46            // 無色透明にする
47            $(this).css("background-color", "");
48       }
49  });
50}); 
51

CSS
1body {
2  font-family: Arial, sans-serif;
3  text-align: center;
4  font-size: 16px;
5}
6#btn{
7  width: 200px;
8  height: 100px;
9  background: crimson;
10  border-radius: 50%;
11  margin: 30px auto;
12  text-align: center;
13  line-height: 100px;
14  font-weight: bold;
15}
16#container {           
17  margin: 0 auto;
18  width: 322px;
19}
20td,th {
21  width: 60px;
22  height: 45px;
23}
24td {
25  background-color: burlywood;
26  text-align: center;
27  border-radius: 50%;
28}
29th {
30  color: rgb(9, 255, 0);
31  font-size: 22px;
32}

m.ts10806

2020/05/03 06:00

前の質問の私のアドバイスがほとんど活かされてないように見受けられますが https://teratail.com/questions/257704 どういう方針なのでしょうか。自身の手に全くおえないコードを眺めていても何も進みませんよ。

m.ts10806

2020/05/03 06:01

それに、HTMLしか提示されてないし。

kei344

2020/05/03 06:04

「質問するときのヒント」を読んで質問を改善しましょう。 https://teratail.com/help/question-tips

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

回答1件

ベストアンサー

以下のような感じでいかがでしょうか?

CSS
1/* 追加 */
2td.active {
3  background-color: gray;
4}

JS
1$(function () {
2  $("td").click(function () {
3    /*
4    // 現在のセルの色が無色透明かを判別
5    if ($(this).css("background-color") == "rgba(0, 0, 0, 0)") {
6      // 赤色に染める
7      $(this).css("background-color", "red");
8    } else {
9      // 無色透明にする
10      $(this).css("background-color", "");
11    }
12    */
13    
14    if (!($(this).hasClass('active'))) {
15      // 赤色に染める
16      $(this).addClass('active');
17    } else {
18      // 無色透明にする
19      $(this).removeClass('active');
20    }
21  });
22});