Javascript do something before alert

Question

I want to change the color and alert a message when a button is clicked.

function colorChange() {
  document.getElementById(\'word\').style.color = \"red\";
         


        

Answer 1

Wrap the alert in a timeout

function colorChange() {
  document.getElementById('word').style.color = "red";
  setTimeout(function() {
  	alert("color changed!");
  },10)
}

<div id="word">
Word .....
</div>
<br />
<button onclick="colorChange()">
Change color
</button>

The browser doesn't have time to repaint before the alert fires, by using a timeout you delay the alert until the next tick, when the repaint has completed.