Javascript- Console.log between multiple prompts

Question

Im pretty sure that a lot of people have encountered this situation. For Ex: You have a simple Choose Your Own Adventure game from JS.

    var name = prompt("Name?");
    console.log("Hello" + name);
    var age = prompt("Age?");
    console.log(name + " is " + age + " years old");

what happens is the first prompt is shown and then the second prompt (age) is shown immediately afterwards. Also, the console doesn't even print out the "Hello" + (name) until after you answer the two prompts. Is there anyway you can "force-print" the console.log between the two prompts?

In my version of Chrome (59.0.3071.) it doesn't. In fact, this is a well-known issue with browser generated dialogs. — Scott Marcus
– Scott Marcus, Commented Jun 27, 2017 at 21:20
If you are working with prompt(), you might as well use alert() for your outputs. — Bergi
– Bergi, Commented Jul 13, 2017 at 4:41

Scott Marcus · Accepted Answer · 2017-06-27 21:23:22Z

1

The issue is that the UI is being updated faster than the JavaScript is executing and this is causing a problem syncing with the console.log statements.

This happens because the JavaScript runtime is not responsible for updating the UI, that's the browsers job and so once the JavaScript asks the browser to update the UI (display the prompt), it does it very quickly and since a propmt is a "blocking" dialog, all other code is suspended.

Adding a short delay solves the problem:

var name = prompt("Name?");
console.log("Hello " + name);

// Force a 10 millisecond delay before running the rest of the code.
setTimeout(function(){
  var age = prompt("Age?");
  console.log(name + " is " + age + " years old");
}, 10);

edited Jun 27, 2017 at 21:23

answered Jun 27, 2017 at 21:17

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

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

Comments

Belmin Bedak · Accepted Answer · 2017-06-27 21:32:47Z

0

You can use Generator functions which are part of the ES6

function * quiz() {
  var name = prompt("Name?");
  yield console.log("Hello" + name);
  var age = prompt("Age?");
  yield console.log(name + " is " + age + " years old");
}

var myQuiz = quiz();
myQuiz.next();
myQuiz.next();

Working demo: https://jsfiddle.net/6mzbhLhz/ - see It in console.

answered Jun 27, 2017 at 21:32

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

1 Comment

Bergi Over a year ago

This does exactly the same thing as the original code.

Collectives™ on Stack Overflow

Javascript- Console.log between multiple prompts

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related