Как поменять цвет у значения переменной JS и вывести?

306

07 февраля 2018, 11:41

if (programmingTimePlan > 0) {
    document.getElementById("programmingTimePlan").innerHTML = programmingTimePlan; //вывод перевыполненного плана
} else if (programmingTimePlan == 0) {
    document.getElementById("programmingTimePlan").innerHTML = programmingTimePlan; //вывод выполненного плана
} else {
    document.getElementById("programmingTimePlan").innerHTML = programmingTimePlan; //вывод не выполненного плана
}

Переменная programmingTimePlan показывает выполнен ли план. Если число положительное, то мне нужно вывести "+" и число programmingTimePlan зеленого цвета. Если равен нулю, то просто число. А если меньше 0, то "-" и число programmingTimePlan красного цвета. Как поменять цвет и прибавить знак "+" или "-"?

<b>За всё время</b>: <span id="programmingTime"></span> XP (<i><span id="programmingTimePlan"></span></i>)

Answer 1

if (programmingTimePlan > 0) {
    document.getElementById("programmingTimePlan").innerHTML = '<span style="color:green;">+' + programmingTimePlan + '</span>'; //вывод перевыполненного плана
} else if (programmingTimePlan == 0) {
    document.getElementById("programmingTimePlan").innerHTML = programmingTimePlan; //вывод выполненного плана
} else {
    document.getElementById("programmingTimePlan").innerHTML = '<span style="color:red;">' + programmingTimePlan + '</span>'; //вывод не выполненного плана
}

Также для изменения цвета можете оперировать классами или стилями самого тега с id programmingTimePlan.