Как покрасить текст в зависимости от символа?

Question

[Dzambulat]

Есть несколько div, в которых записан текст. Скрипт должен менять цвет текста в зависимости от символа в тексте. Например: +10% (если +, то цвет текста должен быть зелёным), -10% (если -, то красным).
Как это сделать?

Comments

[Вадим]

if ( elem.innerText.startsWith('+') ) {
  elem.style.color = 'green'
}

А Ваш код где, собственно? Приммер вёрстки? пример Вашего скрипта? Что именно не получилось?

[Dzambulat]

Вадим,

<div class="mc-block">
         <div class="mc-item">
                   <span class="mc__span">+10%</span>
         </div>
         <div class="mc-item">
                   <span class="mc__span">-10%</span>
         </div>
         <div class="mc-item">
                   <span class="mc__span">-10%</span>
         </div>
         <div class="mc-item">
                   <span class="mc__span">+10%</span>
         </div>
</div>

Надеюсь будет более понятно. Нужно чтобы текст в span в зависимости от + или - менялся цвет текста

[Сергей Соколов]

Dzambulat, выбрать все span.mc__span через querySelectorAll()

Обойти их через forEach(), в каждом смотреть innerText.startsWith('+') .. else .. и тут добавлять класс "number_red" или "number_green"

[Dzambulat]

Вадим,

const MCITEMDIFFERENCE = document.querySelectorAll('.mc__span');

MCITEMDIFFERENCE.forEach((element)=>{
    if (element.innerHTML.startsWith("+")) {
        element.classList.add("plusDifference"));
    }
    if (element.innerHTML.startsWith("-") {
        element.classList.add("minusDifference");
    }
})

И вот что у меня получилось после всех раздумий но оно не работает

[Алексей Ярков]

Dzambulat, во первых innerText. Во вторых вы стили для классов добавили?

[Dzambulat]

Алексей Ярков, да

[Алексей Ярков]

Dzambulat, покажете? ))

[Dzambulat]

Алексей Ярков,

. plusDifference {
color: #369c38;
}
. minusDifference{
color: #c7291e;
}

Answer 1

[Сергей Соколов]

Answer 2

[Вадим]

const MCITEMDIFFERENCE = document.querySelectorAll('.mc__span');

MCITEMDIFFERENCE.forEach((element)=>{
    if (element.innerHTML.startsWith("+") {
        element.classList.add("plusDifference");
    }
    if (element.innerHTML.startsWith("-") {
        element.classList.add("minusDifference");
    }
})

Dzambulat, а круглые скобки кто будет после if закрывать?
Вам ошибка синтаксиса в консоле вообще ни о чём не намекает?

Вот где исправлено и работает:

Comments

[Dzambulat]

Вот что значит не внимательность. Спасибо за помощь