防止数组被覆盖或多次调用

Question

I am trying to remove items from an array which I have successfully done but am not getting desired results. Every time a div with a unique id is clicked it should remove that unique id from the array squaresNotClicked and when I output to console I want it to show me the array one time instead of repeating itself. I have included my code and the output below.

  $("#board").on("click", ".boardSquares:not('.clicked')", function( event ) {
      $(this).addClass('clicked');
      var squaresNotClicked = ['1', '2', '3', '4', '5', '6', '7', '8' ,'9'];
      var squaresClicked = new Object();
      var square = event.target.id;

      if(this.className != 'clicked') {
          var removeSquare = "" + square + "" ;
          $(this).prepend('<img class="theImg" src="images/X.png" />');
          squaresClicked[square] = '1' ;
          squaresNotClicked = jQuery.grep(squaresNotClicked, function(value) {
          return value != removeSquare;
        });
      }

      function checkArray() {
        jQuery.each( squaresClicked, function(i, val) {
            console.log(squaresClicked);
        });
      }

      $("body").dblclick(function() {
          checkArray();
          console.log(squaresNotClicked);
      });
    }); 

In this example output I clicked square 2 and 3 then double clicked to output the contents of the array to the console. I understand that the array is being reassigned the with the starting values each time.

Object {2: "1"}
["1", "3", "4", "5", "6", "7", "8", "9"]
Object {3: "1"}
["1", "2", "4", "5", "6", "7", "8", "9"] 

If I move the line where I create the array var squaresNotClicked outside of the scope of this function and click squares 2 and 3 again I get this for output:

Object {2: "1"}
["1", "4", "5", "6", "7", "8", "9"]
Object {3: "1"}
["1", "4", "5", "6", "7", "8", "9"] 

This is close to what I want but it will keep outputting the array to console for however many times I click a square. If I click squares 1, 2, 3 it will output the array to console 3 times. How do I prevent this from occurring?

Answer 1

To prevent the multiple showing of the result in the console put the following code outside of the click handler:

$("body").dblclick(function() {
    checkArray();
    console.log(squaresNotClicked);
});

Once you click on .boardSquares you attach a new listener to the body.

Answer 2

It's not overwritten actually, you should say used only one time. Keep in mind that each time you click on a square, the entire event handler is called again and again. Put everything which does not need to be redefined outside of it. Here is a little help (not tested, I let you check by yourself) :

var squaresNotClicked = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
var squaresClicked = new Object();
$("#board").on("click", ".boardSquares:not('.clicked')", function (event) {
    $(this).addClass('clicked');
    var square = event.target.id;
    if (this.className != 'clicked') {
        var removeSquare = "" + square + "";
        $(this).prepend('<img class="theImg" src="images/X.png" />');
        squaresClicked[square] = '1';
        squaresNotClicked = jQuery.grep(squaresNotClicked, function (value) {
            return value != removeSquare;
        });
    }
});
function checkArray() {
    jQuery.each(squaresClicked, function (i, val) {
        console.log(squaresClicked);
    });
}
$("body").dblclick(function () {
    checkArray();
    console.log(squaresNotClicked);
});

Answer 3

Change the body dubble click event :

$("body").dblclick(function() {
    console.log(squaresNotClicked);
});

Also, moveit outside of the "main" click event!