Javascript button function stuck

Question

I am coding a little bingo game, and it has been working fine, until now, I have run a debugger and there are no errors, but half of the time the page does not load, and after you press the reset button 1-2 times, the page freezes. (My code might not be the cleanest, and this is still a work in progress)

HTML:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" text="text/javascript"></script>
        <script src="js/game.js"></script>
        <title>YEET</title>
        <link rel="stylesheet" href="css/game.css" type="text/css">
    </head>
    <body onload="reset()">
        <h1 id="title">BINGO</h1>
        <table id="tblA">
            <tr>
                <th>B</th>
                <th>I</th>
                <th>N</th>
                <th>G</th>
                <th>O</th>
            </tr>
            <tr>
                <td id="B1"></td>
                <td id="I1"></td>
                <td id="N1"></td>
                <td id="G1"></td>
                <td id="O1"></td>
            </tr>
            <tr>
                <td id="B2"></td>
                <td id="I2"></td>
                <td id="N2"></td>
                <td id="G2"></td>
                <td id="O2"></td>
            </tr>
            <tr>
                <td id="B3"></td>
                <td id="I3"></td>
                <td id="N3"></td>
                <td id="G3"></td>
                <td id="O3"></td>
            </tr>
            <tr>
                <td id="B4"></td>
                <td id="I4"></td>
                <td id="N4"></td>
                <td id="G4"></td>
                <td id="O4"></td>
            </tr>
            <tr>
                <td id="B5"></td>
                <td id="I5"></td>
                <td id="N5"></td>
                <td id="G5"></td>
                <td id="O5"></td>
            </tr>
        </table>
        <div class="vl"></div>
        <table id="tblB">
            <tr>
                <th>B</th>
                <th>I</th>
                <th>N</th>
                <th>G</th>
                <th>O</th>
            </tr>
            <tr>
                <td id="B1x"></td>
                <td id="B2x"></td>
                <td id="B3x"></td>
                <td id="B4x"></td>
                <td id="B5x"></td>
            </tr>
            <tr>
                <td id="I1x"></td>
                <td id="I2x"></td>
                <td id="I3x"></td>
                <td id="I4x"></td>
                <td id="I5x"></td>
            </tr>
            <tr>
                <td id="N1x"></td>
                <td id="N2x"></td>
                <td id="N3x"></td>
                <td id="N4x"></td>
                <td id="N5x"></td>
            </tr>
            <tr>
                <td id="G1x"></td>
                <td id="G2x"></td>
                <td id="G3x"></td>
                <td id="G4x"></td>
                <td id="G5x"></td>
            </tr>
            <tr>
                <td id="O1x"></td>
                <td id="O2x"></td>
                <td id="O3x"></td>
                <td id="O4x"></td>
                <td id="O5x"></td>
            </tr>
        </table>
        <button class="button" id="nextNum">NEXT NUMBER</button>
        <button class="button" id="reset" onclick="reset()">RESET</button>
    </body>
</html>

CSS:

@font-face {
    font-family: "Bauhaus 93";
    src: url("fonts/Bauhaus 93.ttf");
}

html {
    background-color: black;
    font-family: "Bauhaus 93";
}
#title {
    color: lime;
    font-family: "Bauhaus 93";
    text-align: center;
    font-size: 100px;
}

table tr td {
    table-layout: fixed;
    border: 3px solid lime;
    color: orange;
}

th {
    border: 3px solid aqua;
    color: crimson;
    font-size: 75px;
}

#tblA {
    table-layout: fixed;
    width: 45%;
    float: left;
}
#tblB {
    table-layout: fixed;
    width: 45%;
    float: right;
}
td {
    width: 10%;
    font-size: 75px;
}
.vl {
    border-left: 6px solid crimson;
    height: 100%;
    width: 0px;
    position: fixed;
    float: center;
    margin-left: 49%;
}

.button {
    position: fixed;
    width: 100px;
    height: 50px;
    font-family: "Bauhaus 93";
    font-size: 30px;
    border-radius: 5%;
    text-shadow: 3px 3px black;
    color: yellow;
    background-color: darkslategrey;
    border-color: red;
    border-width: 2px;
    top: 5%;
    opacity: 0.75;
}

.button:hover {
    opacity: 1.0;
}

#reset {
    right: 20%;
}
#nextNum {
    left: 20%;
}

JS:

//Variables
var a;
var b;
var c;
var d;
var e;
var f;
var g;
var h;
var i;
var j;
var k;
var l;
var m;
var n;
var o;
var p;
var q;
var r;
var s;
var t;
var u;
var v;
var w;
var x;
var y;
var aX;
var bX;
var cX;
var dX;
var eX;
var fX;
var gX;
var hX;
var iX;
var jX;
var kX;
var lX;
var mX;
var nX;
var oX;
var pX;
var qX;
var rX;
var sX;
var tX;
var uX;
var vX;
var wX;
var xX;
var yX;

function pickNumsB() {
    a = Math.floor(Math.random() * 16);
    while (a == 0) {
        a = Math.floor(Math.random() * 16);
    }
    b = Math.floor(Math.random() * 16);
    while (b == 0 || b == a) {
        b = Math.floor(Math.random() * 16);
    }
    c = Math.floor(Math.random() * 16);
    while (c == 0 || c == a || c == b) {
        c = Math.floor(Math.random() * 16);
    }
    d = Math.floor(Math.random() * 16);
    while (d == 0 || d == a || d == b || d == c) {
        d = Math.floor(Math.random() * 16);
    }
    e = Math.floor(Math.random() * 16);
    while (e == 0 || e == a || e == b || e == c || e == d) {
        e = Math.floor(Math.random() * 16);
    }
    document.getElementById("B1").innerHTML = a;
    document.getElementById("B2").innerHTML = b;
    document.getElementById("B3").innerHTML = c;
    document.getElementById("B4").innerHTML = d;
    document.getElementById("B5").innerHTML = e;
}
function pickNumsI() {
    f = Math.floor(Math.random() * 31);
    while (f == 0 || f < 16) {
        f = Math.floor(Math.random() * 31);
    }
    g = Math.floor(Math.random() * 31);
    while (g == 0 || g == f || g < 16) {
        g = Math.floor(Math.random() * 31);
    }
    h = Math.floor(Math.random() * 31);
    while (h == 0 || h == f || h == g || h < 16) {
        h = Math.floor(Math.random() * 31);
    }
    i = Math.floor(Math.random() * 31);
    while (i == 0 || i == f || i == g || i == h || i < 16) {
        i = Math.floor(Math.random() * 31);
    }
    j = Math.floor(Math.random() * 31);
    while (j == 0 || j == f || j == g || j == h || j == i || j < 16) {
        j = Math.floor(Math.random() * 31);
    }
    document.getElementById("I1").innerHTML = f;
    document.getElementById("I2").innerHTML = g;
    document.getElementById("I3").innerHTML = h;
    document.getElementById("I4").innerHTML = i;
    document.getElementById("I5").innerHTML = j;
}
function pickNumsN() {
    k = Math.floor(Math.random() * 46);
    while (k == 0 || k < 31) {
        k = Math.floor(Math.random() * 46);
    }
    l = Math.floor(Math.random() * 46);
    while (l == 0 || l == k || l < 31) {
        l = Math.floor(Math.random() * 46);
    }
    m = Math.floor(Math.random() * 46);
    while (m == 0 || m == k || m == l || m < 31) {
        m = Math.floor(Math.random() * 46);
    }
    n = Math.floor(Math.random() * 46);
    while (m == 0 || m == k || m == l || n == m || n < 31) {
        n = Math.floor(Math.random() * 46);
    }
    o = Math.floor(Math.random() * 46);
    while (o == 0 || o == k || o == l || o == m || o == n || o < 31) {
        o = Math.floor(Math.random() * 46);
    }
    document.getElementById("N1").innerHTML = k;
    document.getElementById("N2").innerHTML = l;
    document.getElementById("N3").innerHTML = m;
    document.getElementById("N4").innerHTML = n;
    document.getElementById("N5").innerHTML = o;
    
}

function pickNumsG() {
    p = Math.floor(Math.random() * 61);
    while (p == 0 || p < 46) {
        p = Math.floor(Math.random() * 61);
    }
    q = Math.floor(Math.random() * 61);
    while (q == 0 || q == p || q < 46) {
        q = Math.floor(Math.random() * 61);
    }
    r = Math.floor(Math.random() * 61);
    while (r == 0 || r == p || r == q || r < 46) {
        r = Math.floor(Math.random() * 61);
    }
    s = Math.floor(Math.random() * 61);
    while (s == 0 || s == p || s == q || s == r || s < 46) {
        s = Math.floor(Math.random() * 61);
    }
    t = Math.floor(Math.random() * 61);
    while (t == 0 || t == p || t == q || t == r || t == s || t < 46) {
        t = Math.floor(Math.random() * 61);
    }
    document.getElementById("G1").innerHTML = p;
    document.getElementById("G2").innerHTML = q;
    document.getElementById("G3").innerHTML = r;
    document.getElementById("G4").innerHTML = s;
    document.getElementById("G5").innerHTML = t;
    
}

function pickNumsO() {
    u = Math.floor(Math.random() * 76);
    while (u == 0 || u < 61) {
        u = Math.floor(Math.random() * 76);
    }
    v = Math.floor(Math.random() * 76);
    while (v == 0 || v == u || v < 61) {
        v = Math.floor(Math.random() * 76);
    }
    w = Math.floor(Math.random() * 76);
    while (w == 0 || w == u || w == v || w < 61) {
        w = Math.floor(Math.random() * 76);
    }
    x = Math.floor(Math.random() * 76);
    while (x == 0 || x == u || x == v || x == w || x < 61) {
        x = Math.floor(Math.random() * 76);
    }
    y = Math.floor(Math.random() * 76);
    while (y == 0 || y == u || y == v || y == w || y == x || y < 61) {
        y = Math.floor(Math.random() * 76);
    }
    document.getElementById("O1").innerHTML = u;
    document.getElementById("O2").innerHTML = v;
    document.getElementById("O3").innerHTML = w;
    document.getElementById("O4").innerHTML = x;
    document.getElementById("O5").innerHTML = y;
    
}


function pickNumsBX() {
    aX = Math.floor(Math.random() * 16);
    while (aX == 0) {
        aX = Math.floor(Math.random() * 16);
    }
    bX = Math.floor(Math.random() * 16);
    while (bX == 0 || bX == aX) {
        bX = Math.floor(Math.random() * 16);
    }
    cX = Math.floor(Math.random() * 16);
    while (cX == 0 || cX == aX || cX == bX) {
        cX = Math.floor(Math.random() * 16);
    }
    dX = Math.floor(Math.random() * 16);
    while (dX == 0 || dX == aX || dX == bX || dX == cX) {
        dX = Math.floor(Math.random() * 16);
    }
    eX = Math.floor(Math.random() * 16);
    while (eX == 0 || eX == aX || eX == bX || eX == cX || eX == dX) {
        eX = Math.floor(Math.random() * 16);
    }
    document.getElementById("B1x").innerHTML = aX;
    document.getElementById("B2x").innerHTML = bX;
    document.getElementById("B3x").innerHTML = cX;
    document.getElementById("B4x").innerHTML = dX;
    document.getElementById("B5x").innerHTML = eX;
}
function pickNumsIX() {
    fX = Math.floor(Math.random() * 31);
    while (fX == 0 || fX < 16) {
        fX = Math.floor(Math.random() * 31);
    }
    gX = Math.floor(Math.random() * 31);
    while (gX == 0 || gX == fX || gX < 16) {
        gX = Math.floor(Math.random() * 31);
    }
    hX = Math.floor(Math.random() * 31);
    while (hX == 0 || hX == fX || hX == gX || hX < 16) {
        hX = Math.floor(Math.random() * 31);
    }
    iX = Math.floor(Math.random() * 31);
    while (iX == 0 || iX == fX || iX == gX || iX == hX || iX < 16) {
        iX = Math.floor(Math.random() * 31);
    }
    jX = Math.floor(Math.random() * 31);
    while (jX == 0 || jX == fX || jX == gX || jX == hX || jX == iX || jX < 16) {
        jX = Math.floor(Math.random() * 31);
    }
    document.getElementById("I1x").innerHTML = fX;
    document.getElementById("I2x").innerHTML = gX;
    document.getElementById("I3x").innerHTML = hX;
    document.getElementById("I4x").innerHTML = iX;
    document.getElementById("I5x").innerHTML = jX;
}
function pickNumsNX() {
    kX = Math.floor(Math.random() * 46);
    while (kX == 0 || kX < 31) {
        kX = Math.floor(Math.random() * 46);
    }
    lX = Math.floor(Math.random() * 46);
    while (lX == 0 || lX == kX || lX < 31) {
        l = Math.floor(Math.random() * 46);
    }
    mX = Math.floor(Math.random() * 46);
    while (mX == 0 || mX == kX || mX == lX || mX < 31) {
        mX = Math.floor(Math.random() * 46);
    }
    nX = Math.floor(Math.random() * 46);
    while (mX == 0 || mX == kX || mX == lX || nX == mX || nX < 31) {
        nX = Math.floor(Math.random() * 46);
    }
    oX = Math.floor(Math.random() * 46);
    while (oX == 0 || oX == kX || oX == lX || oX == mX || oX == nX || oX < 31) {
        oX = Math.floor(Math.random() * 46);
    }
    document.getElementById("N1x").innerHTML = kX;
    document.getElementById("N2x").innerHTML = lX;
    document.getElementById("N3x").innerHTML = mX;
    document.getElementById("N4x").innerHTML = nX;
    document.getElementById("N5x").innerHTML = oX;
    
}

function pickNumsGX() {
    pX = Math.floor(Math.random() * 61);
    while (pX == 0 || pX < 46) {
        pX = Math.floor(Math.random() * 61);
    }
    qX = Math.floor(Math.random() * 61);
    while (qX == 0 || qX == pX || qX < 46) {
        qX = Math.floor(Math.random() * 61);
    }
    rX = Math.floor(Math.random() * 61);
    while (rX == 0 || rX == pX || rX == qX || rX < 46) {
        rX = Math.floor(Math.random() * 61);
    }
    sX = Math.floor(Math.random() * 61);
    while (sX == 0 || sX == pX || sX == qX || sX == rX || sX < 46) {
        sX = Math.floor(Math.random() * 61);
    }
    tX = Math.floor(Math.random() * 61);
    while (tX == 0 || tX == pX || tX == qX || tX == rX || tX == sX || tX < 46) {
        tX = Math.floor(Math.random() * 61);
    }
    document.getElementById("G1x").innerHTML = pX;
    document.getElementById("G2x").innerHTML = qX;
    document.getElementById("G3x").innerHTML = rX;
    document.getElementById("G4x").innerHTML = sX;
    document.getElementById("G5x").innerHTML = tX;
    
}

function pickNumsOX() {
    uX = Math.floor(Math.random() * 76);
    while (uX == 0 || uX < 61) {
        uX = Math.floor(Math.random() * 76);
    }
    vX = Math.floor(Math.random() * 76);
    while (vX == 0 || vX == uX || vX < 61) {
        vX = Math.floor(Math.random() * 76);
    }
    wX = Math.floor(Math.random() * 76);
    while (wX == 0 || wX == uX || wX == vX || wX < 61) {
        wX = Math.floor(Math.random() * 76);
    }
    xX = Math.floor(Math.random() * 76);
    while (xX == 0 || xX == uX || xX == vX || xX == wX || xX < 61) {
        xX = Math.floor(Math.random() * 76);
    }
    yX = Math.floor(Math.random() * 76);
    while (yX == 0 || yX == uX || yX == vX || yX == wX || yX == xX || yX < 61) {
        yX = Math.floor(Math.random() * 76);
    }
    document.getElementById("O1x").innerHTML = uX;
    document.getElementById("O2x").innerHTML = vX;
    document.getElementById("O3x").innerHTML = wX;
    document.getElementById("O4x").innerHTML = xX;
    document.getElementById("O5x").innerHTML = yX;
}

function board1() {
    pickNumsB();
    pickNumsI();
    pickNumsN();
    pickNumsG();
    pickNumsO();
}

function board2() {
    pickNumsBX();
    pickNumsIX();
    pickNumsNX();
    pickNumsGX();
    pickNumsOX();
}

function reset() {
    board1();
    board2();
}

Right off the bat, I can say you are taking the wrong approach here. You should never use tables for layout. To get the layout of the BINGO board, you should be using CSS. Next, it's most definitely all those `while` loops that are locking things up. You should make a centralized randomization function that you can call when you need to, but definitely not have all those loops. — Scott Marcus, Jul 27 '20 at 20:40
I know that my code has some things that might not be the best, I am not a very experienced programmer. — jed331, Jul 27 '20 at 20:42
Next. `.innerHTML` has security implications as well as performance implications. Use `.textContent` instead when your strings have no HTML in them. Additionally, instead of searching the document for the same elements over and over every time your functions are called, search the document for the references just once and cache them in variables. Use the variables in your functions. You've also got repetitive code all over the place. Create a single function to do a task and pass arguments to it to make it operate with different inputs each time. You'll be able to eliminate lots of code. — Scott Marcus, Jul 27 '20 at 20:43
You are asking why your page locks up. The things I'm pointing out all contribute to that. It's not that the code "is not the best". Frankly, it's that you are doing things using very bad techniques that all hurt performance. — Scott Marcus, Jul 27 '20 at 20:44
Do you have any suggestions for the code I would use instead of this because I can't think of how it would work, I already changed everything to textContent. — jed331, Jul 27 '20 at 20:54
I do and I've already indicated what those ideas are, but really, you need to learn more about function arguments and code reuse. You're code is really so bad that I wouldn't even try to fix it. I'd just start over. — Scott Marcus, Jul 27 '20 at 21:02
I changed the code to: https://docs.google.com/document/d/17urelkez_pO4vBn30XE_xSBiQ7GT_ASg-CGs3-z9z4U/edit?usp=sharing and it still won't load. — jed331, Jul 27 '20 at 21:27

Aaron Plocharczyk · Accepted Answer · 2020-07-27T21:45:19.960

Your code works; it's just insanely inefficient. For example, in pickNumsO(), you pick a number from 0-75 over and over until it falls in the range of 61-75. Then, you do that again, adding the criteria that it can't match the first pick. Then again and again and again, each time decreasing the number of acceptable picks. This is going to have to run for a while before it gets everything right, and that's just one function in your code.

A better way to get non-repeating ints in the range of 61-75 is to create an array of the ints in that range and shuffle it. Then, use the value at index 0 as your first non-repeating value, the value at index 1 as your second non-repeating value, and so on. You can use the shuffle algorithm provided here and do this by hand in JavaScript like this:

//create array
var picks = [];

//fill array
for (var i = 61; i <= 75; i++) {
  picks[picks.length] = i;
}

//shuffle array
var j, x, i;
for (i = picks.length - 1; i > 0; i--) {
  j = Math.floor(Math.random() * (i + 1));
  x = picks[i];
  picks[i] = picks[j];
  picks[j] = x;
}

//log the shuffled array
console.log(picks);

But I prefer to do it with rando.js, like this:

var picks = randoSequence(61, 75);
console.log(picks);

<script src="https://randojs.com/2.0.0.js"></script>

If you apply this technique to your JavaScript, you get something that's much more efficient:

function pickNumsB() {
  var picks = randoSequence(1, 15);
  document.getElementById("B1").innerHTML = picks[0];
  document.getElementById("B2").innerHTML = picks[1];
  document.getElementById("B3").innerHTML = picks[2];
  document.getElementById("B4").innerHTML = picks[3];
  document.getElementById("B5").innerHTML = picks[4];
}

function pickNumsI() {
  var picks = randoSequence(16, 30);
  document.getElementById("I1").innerHTML = picks[0];
  document.getElementById("I2").innerHTML = picks[1];
  document.getElementById("I3").innerHTML = picks[2];
  document.getElementById("I4").innerHTML = picks[3];
  document.getElementById("I5").innerHTML = picks[4];
}

function pickNumsN() {
  var picks = randoSequence(31, 45);
  document.getElementById("N1").innerHTML = picks[0];
  document.getElementById("N2").innerHTML = picks[1];
  document.getElementById("N3").innerHTML = picks[2];
  document.getElementById("N4").innerHTML = picks[3];
  document.getElementById("N5").innerHTML = picks[4];

}

function pickNumsG() {
  var picks = randoSequence(46, 60);
  document.getElementById("G1").innerHTML = picks[0];
  document.getElementById("G2").innerHTML = picks[1];
  document.getElementById("G3").innerHTML = picks[2];
  document.getElementById("G4").innerHTML = picks[3];
  document.getElementById("G5").innerHTML = picks[4];

}

function pickNumsO() {
  var picks = randoSequence(61, 75);
  document.getElementById("O1").innerHTML = picks[0];
  document.getElementById("O2").innerHTML = picks[1];
  document.getElementById("O3").innerHTML = picks[2];
  document.getElementById("O4").innerHTML = picks[3];
  document.getElementById("O5").innerHTML = picks[4];

}


function pickNumsBX() {
  var picks = randoSequence(1, 15);
  document.getElementById("B1x").innerHTML = picks[0];
  document.getElementById("B2x").innerHTML = picks[1];
  document.getElementById("B3x").innerHTML = picks[2];
  document.getElementById("B4x").innerHTML = picks[3];
  document.getElementById("B5x").innerHTML = picks[4];
}

function pickNumsIX() {
  var picks = randoSequence(16, 30);
  document.getElementById("I1x").innerHTML = picks[0];
  document.getElementById("I2x").innerHTML = picks[1];
  document.getElementById("I3x").innerHTML = picks[2];
  document.getElementById("I4x").innerHTML = picks[3];
  document.getElementById("I5x").innerHTML = picks[4];
}

function pickNumsNX() {
  var picks = randoSequence(31, 45);
  document.getElementById("N1x").innerHTML = picks[0];
  document.getElementById("N2x").innerHTML = picks[1];
  document.getElementById("N3x").innerHTML = picks[2];
  document.getElementById("N4x").innerHTML = picks[3];
  document.getElementById("N5x").innerHTML = picks[4];

}

function pickNumsGX() {
  var picks = randoSequence(46, 60);
  document.getElementById("G1x").innerHTML = picks[0];
  document.getElementById("G2x").innerHTML = picks[1];
  document.getElementById("G3x").innerHTML = picks[2];
  document.getElementById("G4x").innerHTML = picks[3];
  document.getElementById("G5x").innerHTML = picks[4];

}

function pickNumsOX() {
  var picks = randoSequence(61, 75);
  document.getElementById("O1x").innerHTML = picks[0];
  document.getElementById("O2x").innerHTML = picks[1];
  document.getElementById("O3x").innerHTML = picks[2];
  document.getElementById("O4x").innerHTML = picks[3];
  document.getElementById("O5x").innerHTML = picks[4];

}

function board1() {
  pickNumsB();
  pickNumsI();
  pickNumsN();
  pickNumsG();
  pickNumsO();
}

function board2() {
  pickNumsBX();
  pickNumsIX();
  pickNumsNX();
  pickNumsGX();
  pickNumsOX();
}

function reset() {
  board1();
  board2();
}

@font-face {
  font-family: "Bauhaus 93";
  src: url("fonts/Bauhaus 93.ttf");
}

html {
  background-color: black;
  font-family: "Bauhaus 93";
}

#title {
  color: lime;
  font-family: "Bauhaus 93";
  text-align: center;
  font-size: 100px;
}

table tr td {
  table-layout: fixed;
  border: 3px solid lime;
  color: orange;
}

th {
  border: 3px solid aqua;
  color: crimson;
  font-size: 75px;
}

#tblA {
  table-layout: fixed;
  width: 45%;
  float: left;
}

#tblB {
  table-layout: fixed;
  width: 45%;
  float: right;
}

td {
  width: 10%;
  font-size: 75px;
}

.vl {
  border-left: 6px solid crimson;
  height: 100%;
  width: 0px;
  position: fixed;
  float: center;
  margin-left: 49%;
}

.button {
  position: fixed;
  width: 100px;
  height: 50px;
  font-family: "Bauhaus 93";
  font-size: 30px;
  border-radius: 5%;
  text-shadow: 3px 3px black;
  color: yellow;
  background-color: darkslategrey;
  border-color: red;
  border-width: 2px;
  top: 5%;
  opacity: 0.75;
}

.button:hover {
  opacity: 1.0;
}

#reset {
  right: 20%;
}

#nextNum {
  left: 20%;
}

<script src="https://randojs.com/2.0.0.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<body onload="reset()">
  <h1 id="title">BINGO</h1>
  <table id="tblA">
    <tr>
      <th>B</th>
      <th>I</th>
      <th>N</th>
      <th>G</th>
      <th>O</th>
    </tr>
    <tr>
      <td id="B1"></td>
      <td id="I1"></td>
      <td id="N1"></td>
      <td id="G1"></td>
      <td id="O1"></td>
    </tr>
    <tr>
      <td id="B2"></td>
      <td id="I2"></td>
      <td id="N2"></td>
      <td id="G2"></td>
      <td id="O2"></td>
    </tr>
    <tr>
      <td id="B3"></td>
      <td id="I3"></td>
      <td id="N3"></td>
      <td id="G3"></td>
      <td id="O3"></td>
    </tr>
    <tr>
      <td id="B4"></td>
      <td id="I4"></td>
      <td id="N4"></td>
      <td id="G4"></td>
      <td id="O4"></td>
    </tr>
    <tr>
      <td id="B5"></td>
      <td id="I5"></td>
      <td id="N5"></td>
      <td id="G5"></td>
      <td id="O5"></td>
    </tr>
  </table>
  <div class="vl"></div>
  <table id="tblB">
    <tr>
      <th>B</th>
      <th>I</th>
      <th>N</th>
      <th>G</th>
      <th>O</th>
    </tr>
    <tr>
      <td id="B1x"></td>
      <td id="B2x"></td>
      <td id="B3x"></td>
      <td id="B4x"></td>
      <td id="B5x"></td>
    </tr>
    <tr>
      <td id="I1x"></td>
      <td id="I2x"></td>
      <td id="I3x"></td>
      <td id="I4x"></td>
      <td id="I5x"></td>
    </tr>
    <tr>
      <td id="N1x"></td>
      <td id="N2x"></td>
      <td id="N3x"></td>
      <td id="N4x"></td>
      <td id="N5x"></td>
    </tr>
    <tr>
      <td id="G1x"></td>
      <td id="G2x"></td>
      <td id="G3x"></td>
      <td id="G4x"></td>
      <td id="G5x"></td>
    </tr>
    <tr>
      <td id="O1x"></td>
      <td id="O2x"></td>
      <td id="O3x"></td>
      <td id="O4x"></td>
      <td id="O5x"></td>
    </tr>
  </table>
  <button class="button" id="nextNum">NEXT NUMBER</button>
  <button class="button" id="reset" onclick="reset()">RESET</button>
</body>

It's still a bit wordy, but it's way more efficient now and will definitely get the job done. If you want to make the JavaScript less wordy, investigate parameters and use them to make a single pickNums function that will do things based on the values you pass to the function rather than defining a new function for every case where you want to use different values.

If your code wasn't so inefficient, it would have actually worked. I've taught a lot of beginners in my day, and that's impressive for a beginner. Nice work. Just keep in mind that you generally want to look for the solution that requires the least amount of work for the computer, and always ask yourself if you can figure out how to do something without repeating yourself. It'll take practice, but it's clear from your code that you'll progress well as you learn. I see bright days for you ahead.

How long can I make a switch statement before my page won't load, because I need to make a long switch statement but now I have the issue. — jed331, Jul 27 '20 at 22:21
incredibly long. you're never going to make one so long that the page doesn't load. if you're having a problem, it's something else. try right clicking the page, selecting "inspect", and then switching over to the console tab. sometimes the page will actually tell you what went wrong there. — Aaron Plocharczyk, Jul 27 '20 at 23:00

Javascript button function stuck

1 Answers1