JavaScript document.body.style.backgroundColor 在 while 循环中不起作用

Question

I'm using while loop to prompt user to enter for changing background-foreground color until user enters no.But the color does not change during run time, color only changes when user says no and loop breaks, not every time it is entered. So only the color/value entered at last takes effect on page. When I run it in debug mode, it works fine.

 function page_color() { while(1) { var input1=prompt("What is your favourite background color"); if (input1=='No' || input1=='no') break; document.body.style.backgroundColor = input1; var input2=prompt("What is your favourite foreground color"); if(input2=='No' || input2=='no') break; document.body.style.color = input2; } }

 <button onclick="page_color()">click here to change foreground and background color of page</button>

Answer 1

I don't know why you need a while loop inside the the page_colour function.

The following code seems to run just fine.

<script>
  function page_color()
{

    var input1=prompt("What is your favourite background color"); 
    document.body.style.backgroundColor = input1;

    var input2=prompt("What is your favourite foreground color");
    document.body.style.color = input2;  

}
</script>
<button onclick="page_color()">click here to change foreground and background color of page</button>

Anyways, The answer to your question is given by W3schools.

https://www.w3schools.com/jsref/met_win_prompt.asp

Do not overuse this method, as it prevents the user from accessing other parts of the page until the box is closed. The prompt() method returns the input value if the user clicks "OK". If the user clicks "cancel" the method returns null.

Since, the prompt and alert statements are blocking your application flow, developers do not use it. (also because it looks ugly)

Alternative to prompt?

Use the input field to collect user input data and add an onClick event handler to run your page_colour function.

Hope this helps.