Question

Im working on a simple html/javascript multiplication game, in which I have a multiplication table with some inputs that represet the results of the products. in that game, you need to answer as fast as you can on as many questions as you can. to make it easy on the players, ive assign an event to the enter key to move to the next input when it is pressed.

Here is the javascript code for highlighting the rows and the enter key event:

for (var i=0; i<boardInputArray.length; i++) {
    boardInputArray[i].onkeydown = (function(nextBox) {
        return function(e) {
            if(e.keyCode == 13) {
                if(nextBox==boardInputArray.length) {boardInputArray[0].focus();boardInputArray[0].select();}
                else {boardInputArray[nextBox].focus();boardInputArray[nextBox].select();}
                var gameCompleted = true;
                for(var c=0;c<boardInputArray.length;c++) {
                    if(boardInputArray[c].value == '') {gameCompleted = false;}
                }
                if(gameCompleted) validateGame();
            }
        }
    })(i+1);
}

I dont want to post the entire code here, because it is very long. If you would like to see the game in action, go to:
http://www.webdesk.co.il/articles/javascript/multiplication-table-game.php

Here’s the problem: I would like that each time the Enter key is pressed, it will check if the following input is empty or not. in case its not empty – skip to the next one and so on until it finds an empty input. That way, the player can go back to the question he didnt answer and not go through all the ones he did answer. makes sense?

Answer 1

You can probably improve this code, but it does take care of moving to the next empty box.

for (var i=0; i<boardInputArray.length; i++) {
    boardInputArray[i].onkeydown = (function(currentBox) {
        return function(e) {
            if(e.keyCode == 13) {
                var gameCompleted = true;
                if(boardInputArray[currentBox].value == '')
                    gameCompleted = false;
                for (
                        var c = (currentBox + 1) % boardInputArray.length;
                        c != currentBox;
                        c = (c + 1) % boardInputArray.length
                    )
                {
                    if(boardInputArray[c].value == '')
                    {
                        gameCompleted = false;
                        boardInputArray[c].focus();
                        boardInputArray[c].select();
                        break;
                    }
                }
                if(gameCompleted) validateGame();
            }
        }
    })(i);
}

Notes:

• I’ve made the anonymous function a function of currentBox instead of nextBox (i instead of i + 1).
• The loop goes through all the boxes except the current box, by starting at the next box, wrapping around and ending at the previous box or when it encounters a blank box.