Change css property periodically and add this value as text into a div

Question

I'd like to have the css property "color" from div #prueba change each 0.5 seconds between value "blue" and "green" and add this value into the existing div #value but i don't know how to do it, i'd also like it to run in any browser.

 body { text-align: center; margin: 0; padding: 0; } #prueba { color: red; background: grey; display: inline; } 

 <div id="#value"></div> <div id="prueba"> ABCDE </div> 

Answer 1

 setInterval(changeColor, 500) function changeColor() { var prueba = document.getElementById('prueba'); if (prueba.style.color === 'blue') { prueba.style.color = 'green'; } else { prueba.style.color = 'blue'; } document.getElementById('value').innerHTML = prueba.style.color; } 

 body { text-align: center; margin: 0; padding: 0; } #prueba { color: red; background: grey; display: inline; } 

 <div id="value">&nbsp;</div> <div id="prueba"> ABCDE </div> 

Use the 'setInterval' function

Answer 2

You can use setInterval() .

 setInterval(function(){ var color = document.getElementById('prueba').style.color; // get current color var nextcolor = color === "green" ? "blue" : "green"; // decide what color should be next document.getElementById('prueba').style.color = nextcolor ; // apply to div document.getElementById('value').innerHTML = nextcolor +'<br />'; // display the color in 'value' div }, 500); //500 milliseconds == 0.5 seconds 

 body{text-align:center; margin:0; padding:0;} #prueba{ color:red; background:grey; display:inline; } 

 <div id="value"> </div> <div id="prueba"> ABCDE </div>