Hey there, I'm diving into the world of JavaScript and have set myself a challenge to create a simple bingo number machine. Check out my CodePen project here. I've successfully generated an array of 20 numbers, shuffled them, and added a marker to the board every time one is drawn. However, I have run into a couple of hurdles that are really bugging me.
Part One: I've implemented a reset button that clears the marked squares on the board. What I'm struggling with is figuring out how to reshuffle the array every time the reset button is pressed.
Part Two: In enhancing the functionality of the display, I've also included a section that shows the previously picked number. It's somewhat working, but I believe there's a more efficient way to do it. Additionally, I can't seem to hide the 'undefined' input that always appears at the beginning. I'm convinced there's a cleaner solution to handle this issue without needing to hide an undefined class.
Thank you in advance for your assistance, you guys are amazing!
P.S. I'm currently focusing on pure JavaScript for this project.
// Here's the function for shuffling the 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;
}
// Input array
var ranNums = shuffle([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]);
// Functions to show next and last numbers
var f = 0;
var g = -1;
function nextNumber() {
var randNum = ranNums[f++];
document.getElementById('current').innerHTML = randNum;
if (f == ranNums.length) f = 0; // reset to first element if you've reached the end
document.getElementById("item" + randNum).className = "red";
}
function lastNumber() {
var past = ranNums[g++];
document.getElementById('previous').innerHTML = past;
if(past === "undefined") {
document.getElementById('previous').style.display='none';
}
}
// Function to remove the class and reset the game
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%;
}
h2 {
}
button {
}
.red {
background-color: red;
}<h1>Bingo!</h1>
<h4>Current Number</h4>
<h2 id="current"></h2>
<h4>Previous Number</h4>
<h2 id="previous"></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(); lastNumber();">Next Number</button>
<button onclick="resetNumbers()">Reset</button>