Javascript prompt alternative in Loop

Question

So, instead of a prompt, I could use an <input type="text"> and a button to do stuff with the values of the input on button click, for example:

var x = [];

$('button').on('click', function(){
  x.push($(input[type="text"]).val());  
});

However, in a loop for example:

var y=0;
var z=[];
do {
  z.push(prompt('input value'));
  y++;
}
while (y<5);

The loop would prompt for a value, user inputs value, prompt assigns value to array, then the loop would prompt again until y reaches 5.

Instead of a prompt, I'd like to do this with my text field input and button. How can I get the loop to pause, wait for user to input text, and submit by clicking button, every time it reaches that part of the loop?

Edit: The pushing of 5 values into the array was just an example. Let's say I wanted to create a game where the loop would move up with an "up" and down with a "down" input. I want to be able to request user input during the loop, similar to how the prompt would do it, but without using prompts.

Don't use a loop. Just check the length of x after the user adds an item, then decide if you want to ask for another add, or stop asking — musefan
– musefan, Commented Apr 3, 2017 at 15:27
Just an idea, you probably want to disable the input/button when you have got 5 entries. In that case, you only need to check the number of entry every time you hit the button. Something like this: $('#buttonid").on('click', function() { if (i >= 5) { $('#buttonid').prop('disabled', 'disabled'); } }); — Nguyen Tuan Anh
– Nguyen Tuan Anh, Commented Apr 3, 2017 at 15:31

T.J. Crowder · Accepted Answer · 2017-04-03 15:48:03Z

8

You don't. You completely change your logic, losing the loop entirely:

var z = [];
$('button').on('click', function() {
    z.push($(input[type="text"]).val());
    if (z.length === 5) {
        // Do what you would have done after the end of the loop here
    }
});

You've edited the question and commented below that what you do next might vary depending on the input. That's not a problem, you just apply the event-response model to your new requirement. For instance, you said

...Let's say I wanted to create a game where the loop would move up with an "up" and down with a "down" input.

Then:

$('button').on('click', function() {
    switch ($(input[type="text"]).val().toLowerCase()) {
        case "up":
            // Do the "up" thing
            break;
        case "down":
            // Do the "down" thing
            break;
    }
});

There are several different ways you might handle dispatching, not necessarily a switch. For instance:

var actions = {
    up: function() {
        // Do the "up" thing
    },
    down: function() {
        // Do the "down" thing
    }
};
$('button').on('click', function() {
    var action = actions[$(input[type="text"]).val().toLowerCase();
    if (action) {
        action();
    }
});

And so on. The key is that instead of working iteratively (I do this, I get that input, I do the next thing, I get more input), you're working reactively: I get input, I do something. That might require some kind of state management (remembering where you are) beyond what's shown above (the first example has state management: We check the length of z to see how many inputs we've collected).

edited Apr 3, 2017 at 15:48

answered Apr 3, 2017 at 15:27

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

CaptainObvious Over a year ago

Thanks for the reply. That would work if all I was looking for is to ask for 5 inputs and push it into an array However, let's say I wanted to create a game where my action depends on the next input - in that case I need a loop and I want to learn how to make a text field substitute for a prompt.

T.J. Crowder Over a year ago

@CaptainObvious: It works for what you showed in your question, yes. It's also how you approach what you're describing. The key is that you embrace the asynchronous, state-based nature of how you're interacting with the user. You don't need a loop, you can make your action depend on the next input just fine using the event-response model above.

user1106925 Over a year ago

@CaptainObvious: TJ answered your question. As in all problems when writing a program, you'd employ basic problem solving skills and use the knowledge you've obtained to figure out a solution. There's no one technique that will cover every situation you may encounter in the future. You can only deal with the problem at hand, which is what TJ Crowder did in this answer. The more fundamental problem you're facing is not understanding what looping constructs are meant to do. They execute their code immediately with no consideration for anything except the condition that halts the loop.

CaptainObvious Over a year ago

I think I got it. I don't need a loop for what I need at hand. But last question: IS there a way to have an input/button that works like a prompt in loops?

T.J. Crowder Over a year ago

@CaptainObvious: If you mean a "stop the code between this statement and the next while I collect input," no, there isn't. prompt, alert, and confirm are horrible special cases.

Collectives™ on Stack Overflow

Javascript prompt alternative in Loop

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related