Как при клике на кнопку менялся цвет у одного из 3х элементов?

Question

[Ilya muromtsev]

Доброго вечера друзья.
НЕ могу понять как, при клике на кнопку менять цвет у элементов.
CodePen
Даны 3 элемента с разными цветами. Даны кнопки. Например, по клику на первую кнопку, первый элемент красится в синий, ещё раз кликаю - второй в синий и т.д.
Для другой кнопки другой цвет..
Получил массив элементов, далее для каждой кнопки вешаю addEventListener и вызываю функцию.
Как лучше реализовать, лезть и менять style или добавлять или удалять классы с background?

Благодарю за помощь в объяснении..

Answer 1

[ymer]

Конечно сомневаюсь, что это правильное решение, но как вариант:

let colors = {
  'orange': 'rgb(255, 165, 0)',
  'blue': 'rgb(0, 0, 255)'
}, buttons = document.getElementsByClassName('btn'), buttonListener = (e) => {
  let currentColor = e.srcElement.innerHTML, circles = document.getElementsByClassName('c');
  
  for(let i = 0; i < circles.length; i += 1) {
    let currentCircle = circles[i];
    
    if(!currentCircle.style['background-color'] || currentCircle.style['background-color'] != colors[currentColor]) {
      currentCircle.style['background-color'] = colors[currentColor];
      break;
    } else continue;
    
  }
  
};

Array.from(buttons, btn => btn.addEventListener('click', buttonListener));

Answer 2

[Ivan Stroykin]

Пример. Далее можете улучшить

Comments

[Ilya muromtsev]

Можно попросить объяснить))
Самое главное здесь это функция changeState(color), которая принимает параметром свойство объекта, то бишь цвет и перезаписывает свойство state.item исходя из условия.
При первом клике условие возвращает false, т.к. null не равен строке(blue) и записывается 0. Правильно?

Далее при втором клике уже будет не 0 а 2, откуда 2?)

[Ivan Stroykin]

Ilya muromtsev, Почему 2? Если кликать по одному цвету, то значение item будет всегда увеличиваться на 1

[Ilya muromtsev]

Ivan Stroykin, не то смотрел в консоле)
Теперь понял,
state.item = state.color === color ? state.item + 1 : 0;
это выражение проверяет цвет, есть кликаем по синему то счетчик увеличивается, если по другому то счетчик сбрасывается.

[Ivan Stroykin]

Ilya muromtsev, именно) и при сбрасывании счетчика в state.color записывается новый цвет, по которому в дальнейшем будет проверка