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

您可以使用 String numArray = y.split(" "); for (int i=0; i<numArray.length; i++) { int newNum = Integer.parseInt(numArray[i]) * 10; toWrite += ("" + newNum); } 。

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;
	}