Code acts differently when placed within a function

Question

I constructed a simple switch/case statement that works well. With the press of the enter key, each case is randomly drawn and removed from the array until nothing remains.

However, when I click a button to call a function which contains the same switch/case statement, the code doesn't work the same. Rather than reaching the end of the array, each press of the enter key continually draws a random case without ever ending.

It appears that my array is resetting with every key press. How come the code doesn't function the same when within a function?

var casesDrawn = [0, 1, 2];
document.body.addEventListener( 'keyup', function (e) {
  if ( e.keyCode == 13 && casesDrawn.length > 0) {
    randSelect();
  }
  function randSelect(){
    var randNum = Math.floor(Math.random() * casesDrawn.length);
    var num = casesDrawn[randNum];
    casesDrawn.splice(randNum, 1);

    switch (num){
      case 0:
        document.getElementById('show').innerHTML = 'case 0 selected';
        break;
      case 1: 
        document.getElementById('show').innerHTML = 'case 1 selected';
        break;
      case 2:
        document.getElementById('show').innerHTML = 'case 2 selected';
        break;
    }
  }
});

function myFunction(){
  var casesDrawn = [0, 1, 2];
  document.body.addEventListener( 'keyup', function (e) {
    if ( e.keyCode == 13 && casesDrawn.length > 0) {
      randSelect();
    }
    function randSelect(){
      var randNum = Math.floor(Math.random() * casesDrawn.length);
      var num = casesDrawn[randNum];
      casesDrawn.splice(randNum, 1);

      switch (num){
        case 0:
          document.getElementById('show').innerHTML = 'case 3 selected';
          break;
        case 1: 
          document.getElementById('show').innerHTML = 'case 4 selected';
          break;
        case 2:
          document.getElementById('show').innerHTML = 'case 5 selected';
          break;
      }
    }
  });
}

<p id="show"></p>
<button onclick="myFunction()">Click to jump to Function</button>

Your `myFunction()` function **adds** a new event listener to the body every time it is called. That won't remove any of the previously-added event listeners, so on every "keyup" event they will *all* run. — Pointy, Aug 30 '18 at 12:36
And yes, each time `myFunction()` is called the local variable `casesDrawn` will be reinitialized to the same original value. — Pointy, Aug 30 '18 at 12:37
You also recreate the `randSelect` function every time. I'd move that out of `myFunction` altogether... — Heretic Monkey, Aug 30 '18 at 12:40

score 1 · Accepted Answer · answered Aug 30 '18 at 12:39

Each time that you call your function, the variable /array casesDrawn is redefined. This does not happen outside the function, because "A variable declared outside a function, becomes GLOBAL."W3

But "Variables declared within a JavaScript function, become LOCAL to the function."W3

If you want the variable casesDrawn to hold its value between different function calls, you have a few options:

define the variable globally (outside the function)
Use an object (that serves as a Class): Static variables in JavaScript or here: https://www.quora.com/How-do-you-create-static-variables-in-JavaScript

Code acts differently when placed within a function

1 Answers1