CSS Change shape background color on every click

Question

Like said in the title. I have some trouble changing the shape background color "onclick". The colors are listed in array but it doesn't mean I just need random value from the array. I want to change the colors in the correct order as listed in array. Moreover I need a variable saying which one of the colors is currently selected.

If anyone has some better idea of making it - I'm willing to find out.

The code is here

for color in colors {
    function button_click() {

Probably even the wrong way of calling the function?

Answer 1

From what I could understand, you want to change color of box on click and every time you click the next color from the array appears.

Here's a simple implementation of that:

 var colors = ["red","blue","green","yellow","purple"]; var i = 0; var selectedColor; function button_click() { selectedColor = colors[i]; document.getElementById("box").style.backgroundColor = selectedColor; i++; if(i > colors.length) i = 0; } 

 div#box { width:100px; height:100px; background-color: white; border-color: black; border-style: solid; border-width: 1px 1px 1px 1px; } 

 <div id="box" onclick="button_click();"></div> 

i is the variable which increments every time you click the box which gets you the next color value from the array and when counter exceeds the number of colors it resets back to 0 (first color)

Answer 2

Try my example below:

 var colors = ["red","blue","green","yellow","purple"]; var index = 0; function button_click() { index = (index + 1) % colors.length; document.getElementById("box").style.backgroundColor = colors[index]; } 

 div#box { width:100px; height:100px; background-color: white; border-color: black; border-style: solid; border-width: 1px 1px 1px 1px; } 

 <div id="box" onclick="button_click();"></div> 

Answer 3

I like all the answers, some is very nice, one or two lines of code.

This is a solution without using a global var index

This will always work, you need a circular list

EDIT: white as default and first color as discussed in the comments

var colors = ["white","red","blue","green","yellow","purple"];
function button_click() {
    var box = document.getElementById("box");
    var background_color = box.style.backgroundColor;
    var i = colors.indexOf(background_color);
    if (i === colors.length-1) {
        i = -1;
    }
    box.style.backgroundColor = colors[i+1];
}

jsfiddle

Answer 4

Here you go:

var colors = ["red","blue","green","yellow","purple"],
    currentColorIndex = 0;

function button_click() {
    document.getElementById("box").style.backgroundColor
        = colors[currentColorIndex];
    currentColorIndex = (currentColorIndex + 1) % colors.length;
}

You seem to have some experience with programming. I would suggest you picking up a book about javascript tho. Even a week of a read and getting used to the syntax will get you a long way.

---

Edit

And this one if you care about the global namespace here:

Square = (function () {
    "use strict";

    var colors = ["white", "red","blue","green","yellow","purple"],
        currentColorIndex = 0,
        squareElement,
        initialize = function ()
        {
            squareElement = document.getElementById("box");
        },
        clickHandler = function () {                
            currentColorIndex = (currentColorIndex + 1) % colors.length;
            squareElement.style.backgroundColor = colors[currentColorIndex];
        };

    return {
        initialize: initialize,
        clickHandler: clickHandler
    };
}());

Square.initialize();

---

<div id="box" onclick="Square.clickHandler()"></div>

https://jsfiddle.net/uzno1fwy/