CODEWITHSUNDEEP
javascriptjquerybackground-color
user1743703
user1743703

Reputation: 131

Script that changes background css on multiple clicks

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.

Upvotes: 0

Views: 50

Answers (4)

user1683056
user1683056

Reputation: 149

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); 
});

Upvotes: 1

Buzinas
Buzinas

Reputation: 11725

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>

Upvotes: 1

Mahesh Jasti
Mahesh Jasti

Reputation: 572

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) );
});

Upvotes: 1

Deepu--Java
Deepu--Java

Reputation: 3820

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++]);
});

Upvotes: 2

Related Questions