0

I'm trying to create a sort of a bingo number generator, where I generate a unique number and display it alone.

I also want that number + all the next numbers I'm generating to display at the bottom in a line.

My issue here is that whenever it hits a duplicate it loops until it finds a unique number, but displays that number as many times as it looped in the bottom row. So if I generate the numbers [4, 6, 2] and then another 4 it would keep looping until it found another number that's not already in the array.

If it hits the numbers in the array 2 times then found a 5, it would display as [4, 6, 2, 5, 5, 5,]. Is there anything I can do to not make it display the first 2 5's?

window.onload = startup;

function startup() {
  document.getElementById("button").onclick = newNumber1;
}

var number = 0;
var bingoNumber = [];
var i;

function newNumber1() {
  number = Math.floor((Math.random() * 9) + 1);
  clickME();
}


function clickME() {
  for (i = 0; i < bingoNumber.length; i++) {
    if (number === bingoNumber[i]) {
      newNumber1();
    }
  }
  bingoNumber.splice(0, 0, number);
  document.getElementById("display").innerHTML = bingoNumber[0];
  document.getElementById("row").innerHTML = bingoNumber;
}
<button type="button" id="button">Click</button>
<div id="display"></div>
<div id="row"></div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Sondre.m
  • 29
  • 2
  • 3
    Java isn't JavaScript - only use those tags that are really relevant for your question. – GhostCat Nov 09 '17 at 14:22
  • `if (bingoNumber.indexOf(number)===-1) { not in array ... }` or `if (bingoNumber.indexOf(number)!=-1) { in array ... }` https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf – mplungjan Nov 09 '17 at 14:32
  • 1
    Populate array with all possible numbers. Create empte array e.g. `bingoNumber`, select a valid index. move element from the big array to `bingoNumber`, splice the element at the big index and repeat – DarkBee Nov 09 '17 at 14:42

3 Answers3

1

Your clickMe calls newNumber1 before it finishes executing, which isn't the problem. The problem is that newNumber1 calls another instance of clickMe, and the loop continues. So by the time newNumber1 generates a unique number, the current and previous instances of clickMe finishes inserting the same new number every time.

Another problem is that, even if you get this working, the loop in clickMe will go on and on if bingoNumber contains all possible unique number that newNumber1 can generate.

Try this:

window.onload = startup;

var bingoNumber = []; // contains all generated numbers

function startup(){ 
    document.getElementById("button").onclick = clickMe;
}

function newNumber(){
    // generate a new number
    return Math.floor((Math.random() * 9) + 1);
}

function clickMe(){

    // if bingoNumber contains all possible values, don't run the rest
    // change this to however you want to terminate it
    if(bingoNumber.length==9){ return false; }

    var num; // number to add to the array

    // generate a new number until it is unique
    for(num=newNumber();bingoNumber.indexOf(num)>=0;num=newNumber());

    // add the unique number in the beginning of the array
    bingoNumber.unshift(num);

    // display last generated value
    document.getElementById("display").innerHTML = bingoNumber[0];

    // display all generated value
    document.getElementById("row").innerHTML = bingoNumber;
}
Eyzi
  • 516
  • 1
  • 6
  • 20
0

Don't add the number to array and display stuff until you really found the unique number:

var found;

function clickME() {

    found = true;
    for (i=0; i < bingoNumber.length; i++) {
        if (number === bingoNumber[i]){ 
            newNumber1();   
            found = false;
        }
    }
    if(found) {
        bingoNumber.splice(0, 0, number);
        document.getElementById("display").innerHTML = bingoNumber[0];
        document.getElementById("row").innerHTML = bingoNumber;
    }
}
Alexandru Pupsa
  • 1,798
  • 4
  • 21
  • 40
0

This will give you all the numbers without running out of stack space. There is an alert at the end to let you know that all the numbers have been called and will also hide the button so you can't click it again. That one you don't need...but why not?

window.onload = startup;

var bingoNumber = [];

function startup(){ 
    document.getElementById("button").onclick = newNumber1;
}

function newNumber1() {
    clickME(Math.floor((Math.random() * 9) + 1));
}


function clickME(num) {  
    if(bingoNumber.length < 9){
        if (bingoNumber.indexOf(num) !== -1){ 
            newNumber1();   
        }else{
            bingoNumber.splice(0, 0, num);
            document.getElementById("display").innerHTML = bingoNumber[0];
            document.getElementById("row").innerHTML = bingoNumber;
        }
    }else{
        alert("All numbers have been picked");
        document.getElementById("button").style.visibility = "hidden";
    }
}
Matt
  • 1,062
  • 1
  • 8
  • 11