Question

I’m an absolute beginner at JavaScript/jQuery.

I was wondering if I could achieve an effect where I can continuously toggle multiple background colours of the webpage by clicking the same button multiple times.

This is the script I found on the Internet:

<script>
  $("#change-colour").click(function(){ 
  $("body").css("background-color","red");
  });
</script>

However, using this I can change the background colour only once. I wish to change the background colour multiple times by clicking the same button, For example:

Click >> Red >> Click >> Blue >> Click >> Green >> Click >> and then back to Red

Any help would be much appreciated.
Thanks.

Answer 1

You’ll need to store the colors somewhere, like an array, and then just use an incrementing variable to get the next color etc, like so:

var colors = ['red', 'blue', 'green', 'cyan'],
    i = 0;

$("#change-colour").click(function(){ 
    $("body").css("backgroundColor", colors[i++]);
    if (i >= colors.length)
        i = 0;

});​

FIDDLE