prompt and change background color in a loop with native javascript

Question

I would like to write a simply Java script (native) program which MUST use a while loop and do the following.

prompts user to enter a colour -
Then change the background to that colour.
keep prompting them to enter colour and keep changing the background colour until user does not enter anything in the prompt at which point the WHILE loop ends.

I have seen lot of variations of this tackled by using functions - but I want to achieve this only using WHILE loop.

IT goldman · Accepted Answer · 2022-08-02 23:22:12Z

1

You can loop until value of the prompt entered is null. However you won't see the color change until after you leave the loop because the command prompt is blocking.

while (true) {
  var color = prompt("enter color", "red");
  if (color === null) {
    break;
  }
  document.body.style.backgroundColor = color;
}

This "asynchronous" version allows the browser to paint between prompt to another. But no while here.

function prompt_then(then) {
  var color = prompt("enter color", "red");
  if (color === null) {
    return;
  }
  document.body.style.backgroundColor = color;
  window.setTimeout(then, 1);
}

prompt_then(prompt_then);

edited Aug 2, 2022 at 23:22

answered Aug 2, 2022 at 23:06

IT goldman

20.4k2 gold badges18 silver badges34 bronze badges

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

8 Comments

lollah mullah Over a year ago

thanks a lot. but, how come your first answer works eventhough it uses while loop?

Pedro Amaral Couto Over a year ago

@lollah mullah, prompt blocks the execution. The loop while is suspended until the function prompt returns a value. That happens when you click the "OK" button.

IT goldman Over a year ago

while loop is ok to use. It's just like for loop. Just don't make it endless because browser can't paint or respond when executing loops. If you need a non-blocking loop, you will need to use some sort of "out of loop" process using command like setTimeout . Which the other example explains

lollah mullah Over a year ago

yes @ITgoldman. I understand the difference between the two example. but my question is how come the first example with the while loop works.

lollah mullah Over a year ago

if I explain my understanding of execution, since the condition for while is true, it goes inside the loop, get the colour, checks if it is null, it is not. so changes the colour and loops, since no delay and the loop starts, how does browser has time to change the colour?

|

Collectives™ on Stack Overflow

prompt and change background color in a loop with native javascript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related