I'm writing a text-based game in javascript, and one of the main "features" is a input box which accepts a user input, and submits the input by a button tag. In my main game loop a call the button's onclick:

var game_u = new game_util();

                function Game_Main(){
                    while(active){
                        input = game_u.getText();
                        //p = new player();
                        active = false;
                    }
                }

                function game_util(){
                    this.getText = function(){
                        //The Submit button 
                        confirm_plr.onclick = function(){
                            //Input value
                            return player_in.value;
                        }
                    }
                } 

The problem with this way, though is that the while loop does not "wait" for the submit button to be clicked to get the input from the `game_u.getText(); function and continues on with the loop.

Is there a better way for me to do this, it is my first wack at a text-based game? I don't want to use the prompt method, because it breaks the immersion of the gameplay.

I'm also ing from Java, an object-oriented programming language, so that's why I use a while loop.

Any help is appreciated.

I'm writing a text-based game in javascript, and one of the main "features" is a input box which accepts a user input, and submits the input by a button tag. In my main game loop a call the button's onclick:

var game_u = new game_util();

                function Game_Main(){
                    while(active){
                        input = game_u.getText();
                        //p = new player();
                        active = false;
                    }
                }

                function game_util(){
                    this.getText = function(){
                        //The Submit button 
                        confirm_plr.onclick = function(){
                            //Input value
                            return player_in.value;
                        }
                    }
                } 

The problem with this way, though is that the while loop does not "wait" for the submit button to be clicked to get the input from the `game_u.getText(); function and continues on with the loop.

Is there a better way for me to do this, it is my first wack at a text-based game? I don't want to use the prompt method, because it breaks the immersion of the gameplay.

I'm also ing from Java, an object-oriented programming language, so that's why I use a while loop.

Any help is appreciated.

• javascript
• html
• loops

Share Improve this question Follow edited Nov 13, 2015 at 20:48 TheRailsRouter asked Nov 13, 2015 at 20:32 TheRailsRouterTheRailsRouter 11511 silver badge66 bronze badges 16

• a prompt box, like an alert will pause execution – Sterling Archer Commented Nov 13, 2015 at 20:33
• Possible duplicate of Sleep in Javascript - delay between actions – Sterling Archer Commented Nov 13, 2015 at 20:34
• Move game_u.getText() into a global variable when the button is clicked, and then "consume" this in the game loop by setting it back to blank when done reading it during one iteration of the game loop. That's one possibility. Note: persistent javascript loops are a bit unusual. – ebyrob Commented Nov 13, 2015 at 20:35
• 3 you might want to look at using callbacks – blueberryfields Commented Nov 13, 2015 at 20:35
• 4 You should not be using that while loop here in the first place – but rather embrace the fact that JavaScript is an event-driven language. – C3roe Commented Nov 13, 2015 at 20:39

 |  Show 11 more ments

3 Answers 3

Sorted by: Reset to default 4

If you want to suspend with user input, a simple prompt() box will do.

Try this:

var input = prompt("Enter data here", "");

This will wait for input and store it into variable input.

See working example on JSFiddle.

---

AFAIK, synchronous JS is not possible, as according to this SO post:

JavaScript is asynchronous, you cannot "pauses" execution. Moreover, while javascript is running the entire user interface freezes, so the user cannot click the button.

As to your question,

If I shouldn't be using a while loop, what would replace it?

because JS is event driven, and you're trying to run code every time that button is clicked (and input is entered), just use a onclick handler.

So, rather than this:

while(active) {
    input = game_u.getText();
    p = new player();
    active = false;
}

You can do:

document.getElementById("button").addEventListener("click", function() {
    input = game_u.getText();
    p = new player();
    active = false;
});

This will run the code every time the button is clicked, essentially the same as what you're trying to do.

One approach is to break the different stages of your game into functions corresponding to the different stages (rooms, levels etc.) which are called depending on the user's input; you will also need a variable that saves the game's current state (room in the example below).

(function Game() {
    var room = 1;
    document.getElementById('playerSubmit').addEventListener('click', function() {
        var playerInput = document.getElementById('playerInput').value;
        if (playerInput == "Go to room 2") {
            room = 2;
        }
        if (playerInput == "Go to room 1") {
            room = 1;
        }
        if (room == 1) {
            room1(playerInput);
        } else if (room == 2) {
            room2(playerInput);
        }
        document.getElementById('playerInput').value = '';
    });
    function room1(playerInput) {
        output('You are in the first room and entered the mand ' + playerInput);
    }
    function room2(playerInput) {
        output("Now you're in room 2. Your mand was " + playerInput);
    }
    function output(text) {
        document.getElementById('output').innerHTML += '<p>' + text + '</p>';
    }       
})();

#output {
    border: solid 1px blue;
    width: 500px;
    height: 400px;
    overflow: scroll;
}
label {
    display: block; margin-top: 1em;
}

<div id="output"></div>
<label for="playerInput">Player input</label>
<input id="playerInput" type="text" size=50 />
<input id="playerSubmit" type="button" value="Submit" />

http://jsfiddle/spjs8spp/2/

You've gotten some great info in the mentary. An evented model might be ideal, but you can do persistent loops. I'm not as familiar with it, but HTML5 Canvas is just that. Maybe look into that some, since nobody else mentioned it yet.