title: document.getElementById("").innerHTML output font color
body: <p>I have a code that loops through array of simple data values and print them out such that </p>
  
  <pre><code>&lt;div id = "output"&gt; Output Updates &lt;/div&gt; 
  &lt;div id = "track"&gt; Track &lt;/div&gt; 
  &lt;div id = "results"&gt; Results &lt;br/&gt;&lt;/div&gt;
  </code></pre>
  
  <p>.</p>
  
  <pre><code>var output = document.getElementById("output");
  
  var data = [12, 22, 01, 8, 34];
  var dataIndex = 0;
  var counter = 0; // Trial 
  var current = 0;
  var previous = data[0];
  
  var output = document.getElementById("output");
  
  setInterval(function() {
      //output.innerHTML = data[dataIndex].x;
      current = data[dataIndex];
      output.innerHTML = current;
      if (current &gt; previous){
          document.getElementById("results").innerHTML += + current + " &lt;br/&gt;";
      }
      else if (current == previous) {
          document.getElementById("results").innerHTML += + current + " &lt;br/&gt;";
      }
      else {
          document.getElementById("results").innerHTML += + current + " &lt;br/&gt;";
      }
  
      previous = current;
      dataIndex = (dataIndex + 1) % data.length;
  
  }, 500)
  </code></pre>
  
  <p>what I want to do is that 
  if (current>previous) condition, then print the result in a green font 
  else if (current == previous) condition, then print the result in a black font
  else condition, then print the result in a red font </p>
  
  <p>when I put a font color style to each conditions, it changes font color of every results that have already been printed </p>
  
  <p>here is a jsfiddle link <a href="https://jsfiddle.net/kmhz6kx0/" rel="nofollow">https://jsfiddle.net/kmhz6kx0/</a></p>