Мы познакомились со свойством style и изменили цвет текста в статье. Кекс хочет, чтобы цвет текста менялся на тот, что пользователь выбрал в выпадающем списке «Цвет текста». В прошлой части мы уже работали с выпадающим списком.

У списка «Цвет текста» 18 значений. Пользователь может выбрать одно из них, развернув список и кликнув на нужный цвет:

По умолчаниюЧёрныйБелыйСветло-серыйРозовыйТёмно-красныйОранжевыйКоричневыйЗолотойСалатовыйЗелёныйАквамаринНебесно-голубойСеро-голубойТёмно-синийИндигоФиолетовыйПурпурный

Выбранное значение хранится в свойстве value выпадающего списка. Чтобы изменить цвет текста на тот, который выбрал пользователь, нужно записать выбранное значение в свойство style статьи.

Цвет текста должен меняться, когда пользователь выбирает новое значение, поэтому используем обработчик событий onchange. Например:

// Находим выпадающий список
let select = document.querySelector('select');

// Добавляем списку обработчик событий
select.onchange = function () {
  // Меняем цвет текста на выбранное значение
  longread.style.color = select.value;
};

Список «Цвет текста» на новостном сайте имеет класс color-setting. Найдём его и сохраним в переменную. После этого добавим списку обработчик событий и изменим цвет текста в статье на выбранное значение.