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

Question

I created a really basic table with 20 numbers inside. I have then bodged together a system which creates an array of 20 numbers and shuffles it, there is then a button which displays one position of the array at a time.

What I want to do, which I haven't been able to figure out yet, is to use the number that has been generated to change to background color of that same number in the table. So if I drew the number 20 it would be marked on the table.

Please could you respond with JavaScript only as jQuery is still a little unknown at the moment.

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

Change your nextNumber method to also highlight the new random number selected

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    
}

Demo

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

You could clean this up a bit, but this one uses a red class. The key is to target the box using document.getElementById("item" + randNum).className = "red";

I have added a resetNumbers() function and button to reset your classes. This is to display the reason why I chose to use a class. Originally I had it resetting after every button click, but if this is BINGO, that probably is not desired. I commented out where I was doing this, but you can still reset.

I prefer this to setting the background colour, as this is controlled through a css class instead, which is easier to manage.

 // 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 = ""; } } 

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

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