Закрасить блок в зависимости от числа

Question

PHP генерирует данные такого вида:

<div class="calculate__content">
    <div class="calculate__content-row">
        <div class="calculate__content-cod">
            КОД
        </div>
        <div class="calculate__content-price">
            Сумма
        </div>
    </div>
</div>

Там где поле код - генерируются 4-значные числа.

Как, желательно, на чистом js сделать чтобы в зависимости от 1 цифры числа (1, 2, 3 и тд. до 9) менялся цвет блока?

Мои жалкие старания)

let elements = document.querySelectorAll('.calculate__content-cod');

 for (let elem of elements) {

        switch(elem[0]) {
          case '0': 
            elem.style.background-color: = "red";
            break;

          case '1': 
            ...
            break;

          default:
            ...
            break;
        }
  }

Answer 1

Если я правильно понял, то решение "в лоб":

let aColor = ['transparent', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet', 'grey', 'tomato'];
[...document.querySelectorAll('.calculate__content-cod')].forEach(el => {
  el.style.backgroundColor = aColor[+el.innerText[0]];
});

<div class="calculate__content">
  <div class="calculate__content-row">
    <div class="calculate__content-cod">
      5623
    </div>
    <div class="calculate__content-price">
      Сумма
    </div>
  </div>
</div>
<div class="calculate__content">
  <div class="calculate__content-row">
    <div class="calculate__content-cod">
      8456
    </div>
    <div class="calculate__content-price">
      Сумма
    </div>
  </div>
</div>
<div class="calculate__content">
  <div class="calculate__content-row">
    <div class="calculate__content-cod">
      1679
    </div>
    <div class="calculate__content-price">
      Сумма
    </div>
  </div>
</div>
<div class="calculate__content">
  <div class="calculate__content-row">
    <div class="calculate__content-cod">
      9534
    </div>
    <div class="calculate__content-price">
      Сумма
    </div>
  </div>
</div>

Answer 2

Лови Даша, но этот код будет не актуален для IE!

function color(){
	const calc_kod = document.getElementsByClassName( "calculate__content-cod" )
		for (let n of calc_kod){
		let arcolor = {1 : '#DC143C', 2 : '#8B0000', 3 : '#FF4500', 
 					   4 : '#ADFF2F', 5 : '#00FFFF', 6 : '#FFFF00',
 					   7 : '#0000CD', 8 : '#FF00FF', 9 : '#000000'};
 		n.style.backgroundColor = arcolor[+n.innerText];
}

БЛОГ НА HUSL

Закрасить блок в зависимости от числа

Ответы (2 шт):