2

Apologies if this is a simple question, but is there a way to output Javascript to the console in real-time, while pausing at each user interaction. In other words, if I did something as simple as...

console.log("What's your name: ");
let userName = prompt("What is your name?");
console.log(userName);

console.log("\n");

console.log("Nice to meet you " + userName + "! What is your age?");
let userAge = prompt("What is your age?");
console.log(userAge);

...can I get the name outputted to the screen before the age prompt comes up? This is doable in other teaching environments (MS Basic & the command prompt), but either doesn't exist in Javascript, or I'm missing something.

Thanks for helping the newb!

9
  • 1
    The name would show up when you say console.log(userName). Do you want it to write to the document? Commented Mar 6, 2019 at 3:38
  • 1
    This is indeed possible -- you need to make use of a Promise(). See this question. Commented Mar 6, 2019 at 3:39
  • Possible duplicate of Unable to load HTML before Javascript Commented Mar 6, 2019 at 3:40
  • What's the issue ? This code works just fine. Commented Mar 6, 2019 at 3:41
  • Aniket G - it does show up, but instantly. The entirety of the code shows instantly. I would like it to execute step-by-step, with the next prompt only appearing after the results of the first appear on screen. Commented Mar 6, 2019 at 3:41

2 Answers 2

1

You can make use of setTimeout, something like this:

console.log("What's your name: ");
let userName = prompt("What is your name?");
console.log(userName);

console.log("\n");
setTimeout(function(){
console.log("Nice to meet you " + userName + "! What is your age?");
let userAge = prompt("What is your age?");
console.log(userAge);
},1000)

Note: This is one way to do it there are ample of other ways to do it.

In case if you want to use promises:

let userName,userAge, userSport;
function basic(){
console.log("What's your name: ");
var promise1 = new Promise(function(resolve, reject){
userName = prompt("What is your name?");
resolve(userName)
})
promise1.then(function(value){
console.log(value);
console.log("\n");
console.log("Nice to meet you " + value + "! What is your age?");
var promise2 =  new Promise(function(resolve, reject){
userAge = prompt("What is your age?");
resolve(userAge)
})
promise2.then(function(value){
console.log(value)
console.log("Nice to meet you " + userName + " aged: " +userAge + ". Let us know your favorite sports")

var promise3 = new Promise(function(resolve, reject){
userSport = prompt("What is your favorite sports?");
resolve(userSport)
})
promise3.then(function(value){
console.log(value)
console.log("Nice to meet you " + userName + " aged:  " +userAge + " and your favorite sports is " +value)
console.log("\n");
console.log("Thanks");
})
})
})

}
basic()
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks @Adarsh - quick follow-up question - if I ask a third question (say, favorite sport) and use that setTimeout function again, it has no effect. The one above works, but another one immediately after does not delay the third question. I've checked other answers on here that appear to use setTimeout repeatedly, so I'm not sure why mine does not function as intended. Thanks!
You need to increase the delay for the latter one.. if you keep the delay to 1000 ms for both then it will trigger both one after other because it would have waited for 1000 ms for both. Try to increase the latter one to 2000 ms .
1

You can use the async/await functionality and promises. I personally do not always like to use .then so this is my version of using Promises.

const Q1 = () => new Promise(resolve => {
  let userName = prompt('What is your name?');
  console.log(`What is your name: ${userName}`);
  resolve(userName);
})

const Q2 = (userName) => new Promise(resolve => {
  console.log(`Nice to meet you ${userName}! What is your age?`);
  let age = prompt('What is your age?');
  console.log(age);
  resolve(age);
})

 const userPrompt = async () => {
   let name = await Q1();
   let age = await Q2(name); // assigned to variable should you want to use it in next question
 }
 
 userPrompt();

You can now just add additional questions as functions.

Also here is a link to a JSFiddle. If you run it and open the console you will see that the name is displayed before the age prompt is opened.

7 Comments

@FZs True it is not async but it forces the code to wait until prompt has finished before it continues to the console.log statement. If you run the initial snippet from OP you will see that the console.log statement prints null. I agree that it is not the conventional way of using async/await, however, I see no reason why you could not use this to force async functions to wait for "long running" functions. Please correct me if I am wrong.
The OP's snippet works (It shows null if you click 'cancel'). But the original question was -if I understood correctly- to -for example- see What's your name: in the console before the first prompt comes up, what your answer -in its current form- didn't accomplish too. And about await (from the docs): If the value of the expression following the await operator is not a Promise, -and it isn't- it's converted to a resolved Promise: so the code proceeds immediately. Happy coding!
@FZs thanks for the clarification, it appears my understanding of await was therefore incorrect. Much appreciated
@NeillHerbst - just to clarify - it was intended to mean that the user would receive a prompt ('what's your name: '), would answer, and then 'what's your name: Jon' would appear on screen just before the second prompt appears. Also, I don't know if it's my browser, but when I check the code snippet at JSFiddle, nothing appears in the output frame. Yours isn't the only one - I've had this problem with a few - not sure why - I'm using an up-to-date Chrome.
And thanks to all for the help - appreciate the assistance!
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.