Подскажите плиз [как чередовать цвета блока по нажатию на кнопку?]

Вопрос-ответ JavaScript
1

Подскажите, как поочерёдно менять цвета по нажатию кнопки? получается красный, а потом никак(((

HTML:

 <div class=”lightWrapper”>

    <button type="button" style="display: block;" onclick="changeColor();">Light button</button>

    <div class="lightResult"></div>

    </div>

JavaScript:

function changeColor() {
  document.querySelectorAll(".lightResult").forEach(v => v.style.backgroundColor = "red" , "yellow" , "green");
}
2

Можно при клике кнопки проверять какой фоновый цвет у блока. Если цвет не из списка доступных, то закрасить первым цветом из списка доступных. Если цвет из списка доступных, то закрасить следующим за ним цветом из списка доступных. Граничный случай это когда цвет блока это последний цвет из списка. Тогда при клике надо закрашивать первым цветом из списка.

Все элементы из описания выше накладываются на JS. Список цветов, проверка значения цвета у элемента. Главное чтобы формат в списке цветов был таким же каким его отдает браузер для .style.backgroundColor.

Вот тут запускающийся код с несколькими консоль логами

И вот этот же код:

const colors = ['red', 'yellow', 'green']
function changeColor() {
  const targetNode = document.querySelector(".lightResult")
  const currentColor = targetNode.style.backgroundColor
  console.log('currentColor', currentColor)
  const currentColorIndex = colors.indexOf(currentColor)
  console.log('currentColorIndex', currentColorIndex)
  // Текущий цвет не в списке тех по которым "проходимсся"
  if (currentColorIndex === -1) {
    targetNode.style.backgroundColor = colors[0]
  } else if (currentColorIndex === colors.length - 1) { // Цвет - последний из массива цветов, тогда закрашиваем первым цветом
    targetNode.style.backgroundColor = colors[0]
  } else { // текущий цвет элемента есть в массиве цветов и он не последний, берем следующий за ним цвет:
    targetNode.style.backgroundColor = colors[currentColorIndex + 1]
  }
}
1 лайк
3

Здравствуйте. Ошибка находится здесь.
v => v.style.backgroundColor = “red” , “yellow” , “green”
Получается что при нажатии запускается функция, которая устанавливает цвет фона в красный, то что идет дальше “yellow” , “green” расценивается как исполняемый код.
Для решения Вашей задачи нужно где-то хранить текущий цвет и добавить логику, которая возвращает новый цвет на основе текущего.
Вот один из вариантов решения.
Да, еще совет. Избегайте “неговорящих” имен переменных. В Вашем примере v не говорит что именно находится в этой переменной.


document.querySelectorAll(".lightResult").forEach(resultBlock => {
   const currentColor = resultBlock.style.backgroundColor;
   let newColor = "red";
   switch(currentColor) {
     case "red": newColor = "yellow";
                       break;
     case "yellow": newColor = "green";
                             break;
     case "green":
     default: newColor = "yellow";
                  break;
     
   }
   resultBlock.style.backgroundColor = newColor;
});
2 лайка