javascript - 初学者javascript，显示数组中的前一个数字并重置函数

Question

大家好，我是 javascript 的新手，我挑战自己制作一个非常基本的宾果号码机。 https://codepen.io/ryantinsley/pen/LdOvgL我生成了一个包含 20 个数字的数组，将它们打乱顺序，每次绘制一个时我都会在板上添加一个标记。我有一个由两部分组成的问题，我知道这对你们中的一些人来说真的很简单，但它让我发疯。

第 1 部分 我添加了一个重置​​按钮，它接受标记为红色的方 block 并删除类。然而，我想做的是我还没有弄清楚的是，我想在每次按下重置按钮时重新排列我的数组。

第 2 部分 作为增加此显示功能的一部分，我还添加了一个前面的数字部分，显示最后选择的数字。尽管我确信有更好的方法可以做到这一点，但我已经设法使其在某种程度上发挥作用。我也在努力隐藏始终显示在开头的“未定义”输入。但我确信有一种方法可以做到这一点，无论如何我都不需要隐藏未定义的类

提前感谢您的所有帮助，您太棒了。

附言我现在只想在纯 JavaScript 中工作。

// 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;
var g = -1;
// the index of the current item to show

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






 // Removes the class and resets 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>

Answer 1

你可以检查前面的数字字段是否被定义，如果是则只显示一个值:

document.getElementById('previous').innerHTML = past ? past : '';

这是使用三元运算符，并做同样的事情:

if (past) {//check if past is not null or undefined
  document.getElementById('previous').innerHTML = past;
else {
  document.getElementById('previous').innerHTML = '';
}

修改后的码笔:codepen