Script that changes background css on multiple clicks

Question

I have a button that when pressed changes background of div

Button code:

<a id="btn1" href="#">Press Me!</a>

Custom classes to which my div should be changes

#main.class1
{
background-color: red;
}
#main.class2
{
background-color: blue;
}
etc...

And finally the script:

$("#btn1").click(function() {
 $('#main').removeClass();
 $('#main').addClass('class1');
});

$("#btn2").click(function() {
 $('#main').removeClass();
 $('#main').addClass('class2');
});

$("#btn3").click(function() {
 $('#main').removeClass();
 $('#main').addClass('class3');
});

It all works but what I am trying to achieve is having only 1 button instead of several. I want this button to keep changing background color every time I press it. Thanks.

Deepu--Java · Accepted Answer · 2015-08-12 06:15:45Z

2

Use following method

var colorArray = ["class1,class2,class3"];
var colorIndex = 0;
$("#btn1").click(function() {
 if(colorIndex == colorArray.length)
 {
    colorIndex = 0;
 }
 $('#main').removeClass();
 $('#main').addClass(colorArray[colorIndex++]);
});

answered Aug 12, 2015 at 6:15

Deepu--Java

3,8403 gold badges21 silver badges31 bronze badges

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

Comments

Mahesh Jasti · Accepted Answer · 2015-08-12 06:18:48Z

1

Or if you want randomly picked up colours,

<div id="main">
<a id="btn1" href="#">Press Me!</a>
</div>

#main.class1
{
background-color: red;
}
#main.class2
{
background-color: blue;
}
#main.class3
{
background-color: green;
}
#main.class4
{
background-color: yellow;
}



$("#btn1").click(function() {
 $('#main').removeClass();   
 $('#main').addClass('class'+(Math.floor(Math.random() * 4) + 1) );
});

answered Aug 12, 2015 at 6:18

Mahesh Jasti

5723 silver badges18 bronze badges

1 Comment

user1743703 Over a year ago

Nice! It's even better. Thanks.

Buzinas · Accepted Answer · 2015-08-12 06:20:22Z

If you want it to be random:

$("#btn1").click(function(e) {
  e.preventDefault();
  $("#main").removeClass().addClass("class" + (parseInt(Math.random() * 3) + 1).toString());
});

#main.class1
{
  background-color: red;
}

#main.class2
{
  background-color: blue;
}

#main.class3
{
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="main">
  <a id="btn1" href="#">Press Me!</a>
</div>

But if you prefer to be linear:

var _currentBg = 1, _maxBg = 3;
$("#btn1").click(function(e) {
  e.preventDefault();
  if (_currentBg === _maxBg) _currentBg = 1;
  else _currentBg++;
  $("#main").removeClass().addClass("class" + _currentBg.toString());
});

#main.class1
{
  background-color: red;
}

#main.class2
{
  background-color: blue;
}

#main.class3
{
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="main">
  <a id="btn1" href="#">Press Me!</a>
</div>

user1683056 · Accepted Answer · 2015-08-12 06:33:22Z

1

The marked answer is perfect, but in case any folks want to change colors in a linear way without using classes, try this:

<a id="btn1">Press Me!</a> 
<div id="main" style="width:100px;height:100px;" data-next="1"></div>

$('#btn1').click(function(){
    // enter as many colors as you want here: 
    var colorsArray = ['red','blue','green'];
    var next = $('#main').attr('data-next');
    if(next > colorsArray.length - 1){next = 0;} 
    $('#main').css('background-color',colorsArray[next]);
    $('#main').attr('data-next',Number(next)+1); 
});

answered Aug 12, 2015 at 6:33

user1683056

1498 bronze badges

Collectives™ on Stack Overflow

Script that changes background css on multiple clicks

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related