Iterating New Event Listeners in Array in JQuery

Question

I am creating a 2d game like 2046 in javascript.

When a user clicks a block, the block would turn to white in color and also the blocks nearby. ie click [3,4] then [3,3],[3,4],[3,5],[2,4],[4,4] turn to white.

However, the event handler cannot make these changes if the blocks nearby have a bigger index than the block being clicked. ie [3,5],[4,4] are malfunctioned.

I had tried to wrap the handler by a closure but it is still failed. What situation would make this?

PS The problem happens in the case WAITING_USER_SELECT_BLOCK . The setBlock(x,y) function returns null while it supposed to be blocks[y][x]

 $(document).ready(function() { Game.init(); }); var Game = (function() { var xNumber = 5; var yNumber = 5; var blocks = []; function setBlock(x, y) { if (blocks[y]) if (blocks[y][x]) { console.log(blocks[y][x]); blocks[y][x].css("background", "#FFF"); } }; function changeStatus(status) { switch (status) { case "WAITING_LOGIC_NEW_GAME": $('#plate').width(50 * xNumber); $('#plate').height(50 * yNumber); for (let y = 0; y < yNumber; y++) { for (let x = 0; x < xNumber; x++) { if (blocks[y] == null) blocks[y] = []; blocks[y][x] = $(['<div class="plate-block" ', 'data-block-at-x="' + x + '" ', 'data-block-at-y="' + y + '"></div>' ] .join('')); $('#plate').append(blocks[y][x]); } } break; case "WAITING_USER_SELECT_BLOCK": $('.plate-block').click(function() { var block = $(this); var sx = block.attr('data-block-at-x'); var sy = block.attr('data-block-at-y'); setBlock(sx, sy); setBlock(sx, sy - 1); setBlock(sx, sy + 1); setBlock(sx - 1, sy); setBlock(sx + 1, sy); console.log("current block"); console.log(block); }); break; } } return { init: function() { changeStatus("WAITING_LOGIC_NEW_GAME"); changeStatus("WAITING_USER_SELECT_BLOCK"); } } })(); 

 #plate { width: 350px; height: 350px; background: #EFEFEF; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .plate-block { width: 50px; height: 50px; background:#EEE; border: 1px solid #DDD; -moz-box-sizing: border-box; box-sizing: border-box; display:inline-block; overflow: hidden; line-height: 50px; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="plate"></div> 

Answer 1

When you read from DOM, value is read as string and not as number. Also, + operator acts as concatination operator for string.

Just parse it to number.

var sx = +block.attr('data-block-at-x');

Sample

 $(document).ready(function() { Game.init(); }); var Game = (function() { var xNumber = 5; var yNumber = 5; var blocks = []; function setBlock(x, y) { if (blocks[y]) if (blocks[y][x]) { console.log(blocks[y][x]); blocks[y][x].css("background", "#FFF"); } }; function changeStatus(status) { switch (status) { case "WAITING_LOGIC_NEW_GAME": $('#plate').width(50 * xNumber); $('#plate').height(50 * yNumber); for (let y = 0; y < yNumber; y++) { for (let x = 0; x < xNumber; x++) { if (blocks[y] == null) blocks[y] = []; blocks[y][x] = $(['<div class="plate-block" ', 'data-block-at-x="' + x + '" ', 'data-block-at-y="' + y + '"></div>' ] .join('')); $('#plate').append(blocks[y][x]); } } break; case "WAITING_USER_SELECT_BLOCK": $('.plate-block').click(function() { var block = $(this); var sx = +block.attr('data-block-at-x'); var sy = +block.attr('data-block-at-y'); setBlock(sx, sy); setBlock(sx, sy - 1); setBlock(sx, sy + 1); setBlock(sx - 1, sy); setBlock(sx + 1, sy); console.log("current block"); console.log(block); }); break; } } return { init: function() { changeStatus("WAITING_LOGIC_NEW_GAME"); changeStatus("WAITING_USER_SELECT_BLOCK"); } } })(); 

 #plate { width: 350px; height: 350px; background: #EFEFEF; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .plate-block { width: 50px; height: 50px; background: #EEE; border: 1px solid #DDD; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; overflow: hidden; line-height: 50px; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="plate"></div>