document.getElementById («»). InnerHTML цвет выходного шрифта

Question

У меня есть код, который перебирает массив простых значений данных и распечатать их таким образом, что

<div id = "output"> Output Updates </div> 
<div id = "track"> Track </div> 
<div id = "results"> Results <br/></div> 

.

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 > previous){ 
     document.getElementById("results").innerHTML += + current + " <br/>"; 
    } 
    else if (current == previous) { 
     document.getElementById("results").innerHTML += + current + " <br/>"; 
    } 
    else { 
     document.getElementById("results").innerHTML += + current + " <br/>"; 
    } 

    previous = current; 
    dataIndex = (dataIndex + 1) % data.length; 

}, 500) 

, что я хочу сделать, это то, что если (текущий> предыдущий) состояние, а затем распечатать результат в зеленой купели еще если (текущий == предыдущий) состояние, а затем распечатать результат в виде черного шрифта еще условие, а затем распечатать результат в виде красного шрифта

, когда я ставлю стиль цвета шрифта каждое условие, он меняет цвет шрифта каждого результаты, которые уже были напечатаны

вот jsfiddle ссылка https://jsfiddle.net/kmhz6kx0/

Answer 1

Прямые текстовые узлы элемента могут иметь только один цвет, но его дети могут иметь разные цвета.

Добавить div с желаемым цветом каждый раз, когда вы обновляете results:

if (current > previous) { 
    color= 'green'; 
} 
else if (current == previous) { 
    color= 'black'; 
} 
else { 
    color= 'red'; 
} 

document.getElementById("results").innerHTML += 
    '<div style="color: '+color+'">' +current + " </div>"; 

Fiddle