make a Toggle button in javascript

Question

I want a toggle button with it's current css background-color value as 'red'. on first click it should change to 'yellow', on second click it changes to 'green', and on third it should change back to 'red'.

HTML

<div id="box" class="boxa"> 1 </div>

Javascript:

$('div[id="box"]').mousedown(function(){


if($(this).css ('background-color', 'red')) {
       $(this).css ('background-color', 'yellow');    
 }  

});

But this doesn't work as $(this).css ('background-color', 'red') always returns true, then tried storing the value in a variable and then checking like this

var color = $(this).css ('background-color');
if (color=="red") {
   // change it to some other color
}

But this doesn't work either as color returns value in RGB. Can anyone help me write a working solution.

Ry- · Accepted Answer · 2016-04-06 20:28:24Z

10

Rather than checking the current colour, know the current colour!

var colors = ['red', 'yellow', 'green'];
var currentColor = 0;

Then the change becomes nice and straightforward:

$('#box').mousedown(function () {
    currentColor++;
    var newColor = colors[currentColor % colors.length];

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

answered Apr 6, 2016 at 20:28

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

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

3 Comments

Ramesh Pareek Over a year ago

can you please explain colors[currentColor % colors.length]?

Ry- Over a year ago

@RameshPareek: currentColor % colors.length is the remainder when currentColor is divided by colors.length. As currentColor increases 0, 1, 2, 3, 4, 5, 6, …, currentColor % colors.length is 0, 1, 2, 0, 1, 2, 0, …. In other words, it makes it wrap back to the start of the array after you reach the end.

Ramesh Pareek Over a year ago

Interesting logic!

Diogo Garcia · Accepted Answer · 2016-04-06 20:33:19Z

0

A less elaborated approach could be:

JS (jQuery):

$(".toggledRed").click(function() {
    $(this).toggleClass("toggledYellow");
}); 


$(".toggledYellow").click(function() {
    $(this).toggleClass("toggledGreen");
}); 


$(".toggledGreen").click(function() {
    $(this).toggleClass("toggledRed");
});

CSS:

.toggledRed{
    background-color:#FF0000;
}

.toggledYellow{
    background-color:#FFFF00;
}

.toggledBlue{
    background-color:#0000FF;
}

And start your HTML with:

<div id="box" class="toggledRed"> 1 </div>

Should work.

edited Apr 6, 2016 at 20:33

answered Apr 6, 2016 at 20:31

Diogo Garcia

271 silver badge9 bronze badges

1 Comment

Ry- Over a year ago

It’ll work with a minor change: event delegation. $('#box').parent().on('click', '.toggledRed', …);. Otherwise $('.toggledYellow') and $('.toggledGreen') won’t select anything and no event listeners will be added.

JPacheco · Accepted Answer · 2016-04-06 21:17:15Z

You can use this code: (not very elegant but functional, LOL)

$(document).ready(function() {
  $('#b1').click(function() {
    var b = $(this);
    if (b.hasClass("red-class")) {
      b.removeClass("red-class");
      b.addClass("yellow-class");
    } else
    if (b.hasClass("yellow-class")) {
      b.removeClass("yellow-class");
      b.addClass("green-class");
    } else
    if (b.hasClass("green-class")) {
      b.removeClass("green-class");
      b.addClass("red-class");
    }
  });
});

body {
  padding: 5px;
}
label {
  font-weight: bold;
}
input[type=text] {
  width: 20em
}
p {
  margin: 1em 0 0;
}
.green-class {
  background-color: #2b542c;
}
.red-class {
  background-color: #ff0000;
}
.yellow-class {
  background-color: #ffff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<label>Change Color in Button</label>
<button id="b1" class="green-class">Hello</button>

JsFiddle link

Collectives™ on Stack Overflow

make a Toggle button in javascript

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related