Why isn't my variable changing?

Question

I am trying to use the following switch statement in order to change a global variable, but it will only change once.

HTML

<button type="button" value =15>16x16</button>
<button type="button" value =31>32x32</button>
<button type="button" value =63>64x64</button>

JavaScript

 var initial_size = 15;
 var $cl;
 var $size;

 $(document).ready(function(){
   populate(initial_size);
 });

function populate(size){
   $('.main-table').empty();
   $size = size;
   switch($size){
    case 15:
        $cl = 'box';
        break;
    case 31:
         $cl = 'bigger-box';
         console.log("case 31");
        break;
    case 63:
         $cl = 'biggest-box';
         console.log("case 63");
         break;
    default:
        break;
    }

    console.log($cl);

    for(var i=0; i < $size; i++){
       $tr = $("<tr></tr>");
       for(var j=0; j < $size; j++){
           $div = $("<div class=" +$cl+"></div>");
           $div.css('background-color', 'lightslategrey');
           $tr.append($("<td></td>").append($div));
        }
       $(".main-table").append($tr);
     } 
   run();
};

 function run(){
     $('.box').hover(function(){
       $(this).css('background-color', 'black');
     });

     $('button').click(function(){
        console.log($(this).val());
        populate($(this).val());
     });
  };

So when I run my code, $cl will be set to 'box', but whenever I click on another button and the loop runs again, $cl does not change to any of the other classes. Am I using the switch statement wrong, or am I not parsing the value correctly, or is the problem because I am using global variables? The only reason I am using global variables is because I am not too familiar with how scoping works in javascript yet, so I figured this way might be easier.

Answer 1

Am I using the switch statement wrong, or am I not parsing the value correctly?

Exactly this. The values of your buttons are strings, but your switch statement is operating on numbers. case statements use strict equality which includes the type. So either parse your values to numbers, or use string literals in your cases. Currently, your code will always reach the default case.

The only reason I am using global variables is because I am not too familiar with how scoping works in javascript yet, so I figured this way might be easier.

Quite simple actually: All function declarations, parameter declarations, and var declarations are scoped to the function that contains them. You really should be using local variables here.

Btw, you really should move that run(); invocation from populate into the document-ready callback, next to populate(initial_size); . Currently, you are attaching a new set of event listeners every time you click a button, and all those listeners will fire on each click.