I have seen the oddest behavior from JavaScript and would love some insight into what is causing this. I made a little sudoku solver app (code below, also available to see at wellsjohnston.com/projects), and part of it features a board generator. When you click ‘generate board’ or ‘solve’, jQuery is supposed to change the button to say “Creating Random Board…” or ‘solving…’. However, when they are clicked, nothing happens. You would think it was simply not working – but that is not the case. When I remove the code to change the button back (ie, removing $(‘.submit_sudoku_board’).text(‘solve’), it all of a sudden works, and changes when clicked (but not back, of course). Does anyone have any idea what is going on??
TL;DR:The code seems to be executing asynchronously. While the solving/board generating recursive functions are running, the rest of the script executes. Why??
Thank you!
EDIT: added HTML code as well. Sorry if it is ugly…
$(function(){
$('.submit_sudoku_board').click(function(){
$('.submit_sudoku_board').text('Solving...');
sudoku();
$('.submit_sudoku_board').text('Solve');
});
$('.clear_board').click(function(){
$('.board_input').val('');
});
$('.generate_board').click(function(){
$('.board_input').val('');
$('.generate_board').text('Creating Random Board...');
console.log('creating random board...')
generate_random_board();
console.log('------done creating board-----');
});
});
function sudoku()
{
var sudoku_board = new Array(9);
for(var i = 0; i < 9; i++){
sudoku_board[i] = new Array(9);
}
var cell, valid = true;
for(i = 0; i < 9; ++i)
{
for(var j = 0; j < 9; ++j)
{
cell = '#r' + i + 'c' + j;
if($(cell).val())
{
if(!($(cell).val() > 0 && $(cell).val() < 10))
{
$('.sudoku_message_box').text("Illegal characer found");
valid = false;
break;
}
sudoku_board[i][j] = ($(cell).val());
}else{
sudoku_board[i][j] = 0;
}
}
}
if(valid)
{
var start = new Date().getTime();
var solved = sudoku_solver(sudoku_board, 0, 0);
var end = new Date().getTime();
var solve_time = (end - start)/1000.0;
if(solved)
{
fill_board(sudoku_board);
$('.sudoku_message_box').text("Solve time: " + solve_time + " seconds");
$('.submit_sudoku_board)').text('Solve');
}else{
$('.sudoku_message_box').text("Sudoku puzzle not solvable");
}
}
}
function sudoku_solver(board, row, col){
if(row == 9)
{
return true;
}else if(col == 9)
{
return sudoku_solver(board, row + 1, 0);
}else if(board[row][col] != 0)
{
return sudoku_solver(board, row, col + 1);
}
for(var i = 1; i < 10; i++)
{
if(can_go(board, row, col, i))
{
board[row][col] = i;
if(sudoku_solver(board, row, col + 1))
{
return true;
}
}
}
board[row][col] = 0;
return false;
}
function can_go(board, row, col, val){
for(var i = 0; i < 9; i++)
{
if(board[row][i] == val || board[i][col] == val)
{
return false;
}
}
var subgrid_row;
var subgrid_col;
if(row < 3)
{
subgrid_row = 0;
}else if(row > 5)
{
subgrid_row = 6;
}else{
subgrid_row = 3;
}
if(col < 3)
{
subgrid_col = 0;
}else if(col > 5)
{
subgrid_col = 6;
}else{
subgrid_col = 3;
}
for(i = subgrid_row; i <= subgrid_row + 2; i++)
{
for(var j = subgrid_col; j <= subgrid_col + 2; j++)
{
if(board[i][j] == val)
{
return false;
}
}
}
return true;
}
function fill_board(board){
var cell;
for(i = 0; i < 9; ++i)
{
for(j = 0; j < 9; ++j)
{
if(board[i][j] != 0)
{
cell = '#r' + i + 'c' + j;
($(cell).val(board[i][j]));
}
}
}
}
function generate_random_board(){
var sudoku_board = new Array(9), dummy_board = new Array(9);
for(var i = 0; i < 9; i++){
sudoku_board[i] = new Array(9);
dummy_board[i] = new Array(9);
}
for(i = 0; i < 9; ++i)
{
for(var j = 0; j < 9; ++j)
{
sudoku_board[i][j] = 0;
dummy_board[i][j] = 0;
}
}
var random_range = Math.floor(Math.random()*10)+ 30;
for(i = 0; i < random_range; i++)
{
var random_x=Math.floor(Math.random()*8) + 1; // generate a random number 1-9
var random_y =Math.floor(Math.random()*8) + 1;
var random_val =Math.floor(Math.random()*8) + 1;
if(can_go(sudoku_board, random_x, random_y, random_val))
{
sudoku_board[random_x][random_y] = random_val;
dummy_board[random_x][random_y] = random_val;
}
}
console.log('solving test board');
var solvable = sudoku_solver(dummy_board, 0, 0);
console.log('iteration complete');
if(solvable)
{
console.log('found board');
$('.generate_board').text('Generate Solvable Board');
fill_board(sudoku_board);
}else{
console.log('board failed');
$('.generate_board').text('board not found');
$('.board_input').val('');
generate_random_board();
}
}
<div class="sudoku">
<div class="sudoku_title">
Sudoku Solver in JavaScript
</div>
<form style="position:relative; left:20%; top:25px;">
<table cellspacing=0 cellpadding=0 border=1 style="background-color:#FFFFFF;">
<!-- row 0 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" maxlength="1" type="text" id="r0c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r0c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r0c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r0c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r0c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r0c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r0c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r0c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r0c8" size="20" /></td>
</tr>
<!-- row 1 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r1c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r1c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c8" size="20" /></td>
</tr>
<!-- row 2 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r2c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r2c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c8" size="20" /></td>
</tr>
<!-- row 3 -->
<tr>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c0" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c1" size="20" /></td>
<td class="board board_horizontal board_vertical"><input class ="board_input" maxlength="1" type="text" id="r3c2" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c3" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c4" size="20" /></td>
<td class="board board_horizontal board_vertical"><input class ="board_input" maxlength="1" type="text" id="r3c5" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c6" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c7" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c8" size="20" /></td>
</tr>
<!-- row 4 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r4c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r4c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c8" size="20" /></td>
</tr>
<!-- row 5 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r5c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r5c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c8" size="20" /></td>
</tr>
<!-- row 6 -->
<tr>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c0" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c1" size="20" /></td>
<td class="board board_horizontal board_vertical"><input class ="board_input" maxlength="1" type="text" id="r6c2" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c3" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c4" size="20" /></td>
<td class="board board_horizontal board_vertical"><input class ="board_input" maxlength="1" type="text" id="r6c5" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c6" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c7" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c8" size="20" /></td>
</tr>
<!-- row 7 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r7c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r7c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c8" size="20" /></td>
</tr>
<!-- row 8 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r8c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r8c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c8" size="20" /></td>
</tr>
<!-- end rows -->
</table>
</form>
<div class="sudoku_bottom">
<div class="submit_sudoku_board">
Solve
</div>
<div class="sudoku_message_box">
Enter a Sudoku puzzle into the board
</div>
</div>
<div class="clear_board">
Clear Board
</div>
<div class="generate_board">
Generate Solvable Board
</div>
</div>
In most browsers, Javascript runs on the GUI thread. If your script is running, the GUI will not be updated until your function returns.
Allow the GUI to regain control and repaint with something like this, which delays doing the actual solve until after the GUI is updated: