CODEWITHSUNDEEP
javascripthtmlcss
peter zhang
peter zhang

Reputation: 1385

I want to change the page background color, but it doesn't work as I expect in Chrome

I am a new JavaScript learner, and I want change the background color of my page, so I wrote a page below:

function change_color() {
  console.log('6666');
  document.body.style.backgroundColor = "green";
  alert("the color has changed to green!");
  console.log('6666');
  document.body.style.backgroundColor = "blue";
}
<button onclick="change_color()">change color</button>

I expect that the function should change the background color to green first, then show the popup window, then change the background color to blue. But it runs differently in Chrome, the page doesn't change to green before the popup window, it only changes to blue, I don't see the process of changing to green. If I open the page by Edge or Firefox, it works well, but if I open the page by Chrome 67.0.3396.40 or Chrome 66.0.3359.170, the page doesn't change to green before the popup window. Why?

Upvotes: 2

Views: 232

Answers (3)

Vineesh
Vineesh

Reputation: 3782

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>666</title>
    <script type="text/javascript" charset="utf-8">
    function change_color() {
     console.log('6666');
     document.body.style.backgroundColor = "green";
     setTimeout(function(){alert("the color has changed to green!"); }, 5);
     console.log('6666');
     setTimeout(function(){document.body.style.backgroundColor = "blue"; }, 5);
}
    </script>
</head>

<body>
    <button type="button" onclick="change_color()">change color</button>
</body>

</html>

These are UI blocking events. You can put a setTimeout to make it work

function change_color() {
     console.log('6666');
     document.body.style.backgroundColor = "green";
     setTimeout(function(){alert("the color has changed to green!"); }, 5);
     console.log('6666');
     setTimeout(function(){document.body.style.backgroundColor = "blue"; }, 5);
}

Upvotes: 2

GOTO 0
GOTO 0

Reputation: 47652

alert is not required to trigger a DOM rerender, and it also does not so in Chrome (unlike other browsers). To see the intermediate changes, you can use a timeout to insert a delay before the alert. The DOM will be rerendered in that time.

function change_color() {
    console.log('6666');
    document.body.style.backgroundColor = "green";
    setTimeout(() => {
        alert("the color has changed to green!");
        console.log('6666');
        document.body.style.backgroundColor = "blue";
    });
}
<button type="button" onclick="change_color()">change color</button>

Upvotes: 2

Jonny
Jonny

Reputation: 1329

You need a if else in there, and set a default background-color to your body with css. 

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<title>666</title>
<script type="text/javascript" charset="utf-8">
function change_color() {
if(document.body.style.backgroundColor == "blue"){
    console.log('6666');
    document.body.style.backgroundColor = "green";
    alert("the color has changed to green!");
} else { 
    console.log('6666');
    document.body.style.backgroundColor = "blue";
}}
</script>
</head>

<body style="background-color:blue;">
<button type="button" onclick="change_color();">change color</button>
</body>

</html>

Upvotes: 0

Related Questions