stilts77 stilts77 - 3 months ago 7
HTML Question

Variable not being written to array - Javascript

I am creating a simple 'bingo caller' tool. There will be a set of phrases in an array - I want to pick random phrases. However, once one is picked, I don't want it picked again.

At the moment - I'm just using random numbers (which will be used to pull the phrases from the array).

I have a function that generates the random number - based on the number of phrases in the function and then checks to see if it exists in an array of drawn numbers. If it doesn't - it is added if it does then the function stops (I want the function to run again - I was calling the function from within itself but it behaved erratically so I have simplified it to stop!).

The picked number is displayed as is the drawn number array too.

However, the function doesn't display how I'd expect it to: as soon as a duplicate number is arrived at, the code begins to add several elements to the array... I'm expecting it not to add anything if it's already there...

<!DOCTYPE HTML SYSTEM>
<html>
<head>
<title>Teaching Styles Bingo</title>
<script type="text/javascript">
var words = [
'One',
'Two',
'Three',
'Four',
'Five',
'Six'
];
var drawn=[];

</script>
</head>
<body>
<button onclick="getNum()">Click me</button>
<p id="never">Hello</p>
<p id="collection"></p>
<p id="first"></p>
<script type="text/javascript">
// random number -> make it x
// then, check is it the first number? If so - add to array
// if not, then check: is it already in the array? If so - stop the function
// if not, add it to the array and wait for further instruction
// output to document the number picked and the contents of the array so far.
function getNum()
{
var x=(Math.floor(Math.random() * (words.length)));
var count=drawn.length;
if (count<1)
{
drawn.push(x);
document.getElementById("never").innerHTML = x;
document.getElementById("collection").innerHTML = drawn;
document.getElementById("first").innerHTML = "First Number";
}
else
{
for (var i=0;i<count;i++)
{
if (drawn[i] === x)
{
return;
}
else
{
drawn.push(x);
document.getElementById("never").innerHTML = x;
document.getElementById("collection").innerHTML = drawn;
document.getElementById("first").innerHTML = "Not First Number";
}
}
}
}
</script>
</body>
</html>


Why doesn't the script simply add nothing if the value exists in the array? Why does the script add several numbers to the array at a time (or at least - the output to html make it look like it does!)

Answer

Something like this.

<!DOCTYPE HTML>
<html>

<head>
  <title>Teaching Styles Bingo</title>
  <script type="text/javascript">
    var words = [
      'One',
      'Two',
      'Three',
      'Four',
      'Five',
      'Six'
    ];
    var drawn = [];
  </script>
</head>

<body>
  <button onclick="getNum()">Click me</button>
  <p id="never">Hello</p>
  <p id="collection"></p>
  <p id="first"></p>
  <script type="text/javascript">
    // random number -> make it x
     // then, check is it the first number? If so - add to array
     // if not, then check: is it already in the array? If so - stop the function
     // if not, add it to the array and wait for further instruction
     // output to document the number picked and the contents of the array so far.
    function getNum() {
      var x = (Math.floor(Math.random() * (words.length)));
      console.log(x);

      var count = drawn.length;
      if (count < 1) {
        drawn.push(x);
        document.getElementById("never").innerHTML = x;
        document.getElementById("collection").innerHTML = drawn;
        document.getElementById("first").innerHTML = "First Number";
      } else if (drawn.indexOf(x) == -1) {
        drawn.push(x);
        document.getElementById("never").innerHTML = x;
        document.getElementById("collection").innerHTML = drawn;
        document.getElementById("first").innerHTML = "Not First Number";
      }
    }
  </script>
</body>

</html>