How to get a different result for each click event in jQuery using lists?

Question

I am extremely new to javascript, and I just can not wrap my head around for loops and variable lists. It seems like every tutorial half way explains it and then rambles/mubles on the rest of the way and doesn't really make it clear.

So, I decided to make a div a different color for each time it's clicked, which iterates through four colors.

HTML:

<div class="myDiv"></div>

CSS:

.myDiv {
    display: block;
    height: 100px;
    width: 150px;
    background: #ea5243;
}

JavaScript (using jQuery):

$(document).ready(function() {
     var colors = ["#b8d30b", "#0099cc", "#e63f35", "#fbd108"];
     for(var i in colors) {
         $(".myDiv").on("click", function() {
             $(this).css("background", colors);
         });
     }
});

Obviously this will not work, but as you can see, I want to rotate through each color code per click.

I have tried googling my problem, but found it hard to phase, therefore no avail. And as I said, I am very new to javascript.

You'll need to add a counter and increment with each click. I'll take a stab at it if I have time. — isherwood
– isherwood, Commented Feb 24, 2013 at 2:13
Here's your code in a fiddle as a starting point: jsfiddle.net/ttgTj — isherwood
– isherwood, Commented Feb 24, 2013 at 2:15

Explosion Pills · Accepted Answer · 2013-02-24 02:18:30Z

4

You can keep shifting and pushing values from the colors array. This is a bit more advanced then just for loops, but it's good to learn about it too. You don't even have to worry about the length of colors.

var colors = ["#b8d30b", "#0099cc", "#e63f35", "#fbd108"];
$(".myDiv").on('click', function () {
    //removes the zeroth element from the array
    var color = colors.shift();

    $(this).css('background-color', color);

    //puts the "pushed" element at the end of the array
    colors.push(color);
});

http://jsfiddle.net/ExplosionPIlls/F79jd/

answered Feb 24, 2013 at 2:18

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

isherwood Over a year ago

E.P., are you ever not on SO? How about laying off the easy ones for us newbies? ;-)

randmath Over a year ago

Thanks! This works! But I decided to go with isherwoods (it doesn't mess up the order). Plus, @E.P. has 38.5k rep. That's......... A lot.

Explosion Pills Over a year ago

@isherwood once I have a gold JavaScript badge I'll move on to other tags

isherwood Over a year ago

I'd have never guessed that you were here for the glory. :P

isherwood · Accepted Answer · 2013-02-24 17:34:56Z

3

http://jsfiddle.net/ttgTj/4

var colors = ["#b8d30b", "#0099cc", "#e63f35", "#fbd108"];
var i = 0;
$(".myDiv").on("click", function () {
    $(this).css("background", colors[i]);
    i = (++i >= colors.length)? 0: i;
});

edited Feb 24, 2013 at 17:34

answered Feb 24, 2013 at 2:18

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

8 Comments

isherwood Over a year ago

E.P.'s answer covers it nicely. I won't bother going further unless you need it.

isherwood Over a year ago

And Derek took care of it for me anyway. Thanks.

randmath Over a year ago

Thanks! I like this one, it's short, nice and works. However, I went with E.P.'s answer because of it's logic which helps me understand a little better. Thanks again! +1

Derek 朕會功夫 Over a year ago

@randmath - Just a note here, EP's method will change the order of the Array. So if you don't want to mess up its order, go with this one instead.

randmath Over a year ago

I actually decided to use this as it doesn't mess with the order. Thanks!

|

Collectives™ on Stack Overflow

How to get a different result for each click event in jQuery using lists?

2 Answers 2

4 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related