javascript - 在 JavaScript 中将数组中的项目与表项目进行比较，初学者

Question

我创建了一个非常基本的表格，里面有 20 个数字。然后，我将一个系统组合在一起，该系统创建一个包含 20 个数字的数组并对其进行洗牌，然后有一个按钮一次显示该数组的一个位置。

我想做的(我还没有弄清楚)是使用已生成的数字更改为表格中相同数字的背景颜色。因此，如果我画出数字 20，它就会标记在 table 上。

请您仅使用 JavaScript 进行回复，因为目前 jQuery 还不太为人所知。

// This bit shuffles an array

function shuffle(array) {
    var i = array.length,
        j = 0,
        temp;

    while (i--) {

        j = Math.floor(Math.random() * (i+1));

        // swap randomly chosen element with current element
        temp = array[i];
        array[i] = array[j];
        array[j] = temp;

    }

    return array;
}

// Array input

var ranNums = shuffle([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]);

//This bit calls the position of the array

var f = 0;  // the index of the current item to show

function nextNumber() {
    document
        .getElementById('test')
        .innerHTML = ranNums[f++];    // get the item and increment
    if (f == ranNums.length) f = 0;   // reset to first element if you've reached the end
}

body {
background-color: white;
color: black;
font-size: 20px;
font-family: "Lucida Grande", Verdana,Arial, Helvetica, sans-serif;
}


h1, th {
font-family: Georgia, "Times New Roman",Times, serif;
}


h1 {
font-size: 28px;
}


table {
border-collapse: separate;
border-spacing: 30px;
float: left;
}


th, td {
padding: 30px;
border: 2px black solid;
text-align: center;
width: 20%;
}

h2 {
  
}

button {
  
}

#item20 {
  background-color: red;
}

<h1>Bingo!</h1>
<h2 id="test"></h2>
<table>
<tr>
<td id="item1"<h1>1</h1></td>
<td id="item2"<h1>2</h1></td>
<td id="item3"<h1>3</h1></td>
<td id="item4"<h1>4</h1></td>
<td id="item5"<h1>5</h1></td>
  </tr>
<tr>
<td id="item6"<h1>6</h1></td>
<td id="item7"<h1>7</h1></td>
<td id="item8"<h1>8</h1></td>
<td id="item9"<h1>9</h1></td>
<td id="item10"<h1>10</h1></td>
</tr>
<tr>
<td id="item11"<h1>11</h1></td>
<td id="item12"<h1>12</h1></td>
<td id="item13"<h1>13</h1></td>
<td id="item14"<h1>14</h1></td>
<td id="item15"<h1>15</h1></td>
</tr>
<tr>
<td id="item16"<h1>16</h1></td>
<td id="item17"<h1>17</h1></td>
<td id="item18"<h1>18</h1></td>
<td id="item19"<h1>19</h1></td>
<td id="item20"<h1>20</h1></td>
</tr>
</table>
<button onclick="nextNumber()">Next Number</button>

Answer 1

将您的 nextNumber 方法更改为同时突出显示所选的新随机数

function nextNumber() {
  var number = ranNums[f];
  f++;
  document.getElementById('test').innerHTML = number;
  document.getElementById("item" + number).style.backgroundColor = "red";
  if (f == ranNums.length) f = 0; // reset to first element if you've reached the end    
}

演示

// This bit shuffles an array

function shuffle(array) {
  var i = array.length,
    j = 0,
    temp;

  while (i--) {

    j = Math.floor(Math.random() * (i + 1));

    // swap randomly chosen element with current element
    temp = array[i];
    array[i] = array[j];
    array[j] = temp;

  }

  return array;
}

// Array input

var ranNums = shuffle([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);


//This bit calls the position of the array

var f = 0; // the index of the current item to show

function nextNumber() {
  var number = ranNums[f];
  f++;
  document.getElementById('test').innerHTML = number;
  document.getElementById("item" + number).style.backgroundColor = "red";
  if (f == ranNums.length) f = 0; // reset to first element if you've reached the end

}

body {
  background-color: white;
  color: black;
  font-size: 20px;
  font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

h1,
th {
  font-family: Georgia, "Times New Roman", Times, serif;
}

h1 {
  font-size: 28px;
}

table {
  border-collapse: separate;
  border-spacing: 30px;
  float: left;
}

th,
td {
  padding: 30px;
  border: 2px black solid;
  text-align: center;
  width: 20%;
}

h2 {}

button {}

#item20 {
  background-color: red;
}

<h1>Bingo!</h1>
<h2 id="test"></h2>
<table>
  <tr>
    <td id="item1" <h1>1</h1>
    </td>
    <td id="item2" <h1>2</h1>
    </td>
    <td id="item3" <h1>3</h1>
    </td>
    <td id="item4" <h1>4</h1>
    </td>
    <td id="item5" <h1>5</h1>
    </td>
  </tr>
  <tr>
    <td id="item6" <h1>6</h1>
    </td>
    <td id="item7" <h1>7</h1>
    </td>
    <td id="item8" <h1>8</h1>
    </td>
    <td id="item9" <h1>9</h1>
    </td>
    <td id="item10" <h1>10</h1>
    </td>
  </tr>
  <tr>
    <td id="item11" <h1>11</h1>
    </td>
    <td id="item12" <h1>12</h1>
    </td>
    <td id="item13" <h1>13</h1>
    </td>
    <td id="item14" <h1>14</h1>
    </td>
    <td id="item15" <h1>15</h1>
    </td>
  </tr>
  <tr>
    <td id="item16" <h1>16</h1>
    </td>
    <td id="item17" <h1>17</h1>
    </td>
    <td id="item18" <h1>18</h1>
    </td>
    <td id="item19" <h1>19</h1>
    </td>
    <td id="item20" <h1>20</h1>
    </td>
  </tr>
</table>
<button onclick="nextNumber()">Next Number</button>