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

Question

我创建了一个内部有20个数字的真正基本表。然后我把一个系统组合在一起，创建了一个包含20个数字的数组并对其进行随机播放，然后有一个按钮，一次显示数组的一个位置。

我想做的事情，我还没有想到的，就是使用生成的数字来改变表格中相同数字的背景颜色。因此，如果我画了数字20，它将被标记在桌面上。

请你能用JavaScript回复，因为jQuery目前还有点不为人知。

＆＃13;

＆＃13;

// 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
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

你可以稍微清理一下，但是这个使用red类。关键是使用document.getElementById("item" + randNum).className = "red";

定位框

我添加了resetNumbers()功能和按钮来重置您的课程。这是为了显示我选择使用类的原因。最初我在每次点击按钮后都重置了它，但如果这是BINGO，那可能是不希望的。我评论了我在做什么，但你仍然可以重置。

我更喜欢这个来设置背景颜色，因为这是通过css类来控制的，这样更容易管理。

＆＃13;

＆＃13;

// 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 randNum = ranNums[f++];
    document.getElementById('test').innerHTML = randNum;    // get the item and increment
    
    if (f == ranNums.length) f = 0;   // reset to first element if you've reached the end
    
    //resetNumbers();//uncomment if you do not want to reset - or remove if you never want this here
    
    document.getElementById("item" + randNum).className = "red";
}

function resetNumbers() {
    for (var i = 0; i < ranNums.length; i++) {
       document.getElementById("item" + ranNums[i]).className = "";
    }
}

＆＃13;

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%;
}

.red {
  background-color: red;
}

＆＃13;

<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>

<button onclick="resetNumbers()">Reset Numbers</button>

＆＃13;

＆＃13;

＆＃13;