Resolved: How to change a color of element on click from a set of colors

Question:

Lets suppose I have a rectangular div called sun.
I have 4 colors for the div.
The colors are red, green, blue and yellow respectively.
The initial color is red.
What I want is when user clicks on the rectangle, the color of rectangle should change from red to green. When clicked again, green to blue, and thus on another click, blue to yellow and atlast when user clicks again the color should change from yellow to red and the cycle should continue. I can not implement such algorithm.
Answer is appreciated if if-else tree is used (although not necessary).

Answer:

Like @Bravo comment you can use javascript array and add with eventListener
It rought but that it.

const box = document.querySelector('.box');

const listColor = ['red', 'green', 'blue', 'yellow'];

let currentColor = 1;
box.addEventListener('click', function() {
  this.style.backgroundColor = listColor[currentColor++];
  if (currentColor == listColor.length) {
    currentColor = 0;
  }
})

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all .3s ease;
}

<div class="box"></div>

If you have better answer, please add a comment about this, thank you!

Resolved: How to change a color of element on click from a set of colors

Resolved: How can I write CSS selector(s) that apply to table rows for all td elements on that row after a td with a certain class?

Resolved: How do I use SetWindowText with Unicode in Win32 using PowerShell?

Resolved: Shopware 400 Status Error “This value is too long. It should have 255 character or less.” When I Try Updating Database Table

Leave A Reply