change background color of specific button on click

Question

The user clicks in order on button 1, 2, and lastly 3. After user clicks on button 3 a "congrats" box pops up, which is working fine.

When user clicks on button 1 the background of that button should turn grey, but button 2 and 3 should still be blue. Then when user clicks on button 2 it should turn grey just like button 1 is already grey and button 3 should still be blue. Then after user clicks on button 3 all buttons should be grey and the "congrats" box appears.

Right now they all stay blue until I click button 3. How to change that?

$(document).ready(function() {

$('#button-1').click(function () {
    $('#button-2').click(function () {
        $('#button-3').click(function () {
            $('.button').css({background: 'grey'});
            $('#congrat-box').fadeIn(1200);
        });
    });
});
  
});

.button {
    height: 30px;
    width: 30px;
    border-radius: 12px;
    background: blue;
    color: gold;
    border: 1px solid white;
    box-shadow: 0 0 3px grey;
}
#congrat-box {
    background: orange;
    font-size: 24px;
    line-height: 50px;
    padding: 20px;
    text-align: center;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="button-1" class="button">1</button>
<button id="button-2" class="button">2</button>
<button id="button-3" class="button">3</button>
<div id="congrat-box">Congrats!!!</div>

Provided snack snippet above, but here is a FIDDLE if you prefer that.

Ian Hazzard · Accepted Answer · 2014-12-31 04:07:10Z

Add $(this).css({ background: 'grey' }); after each button click to make it turn gray. Maybe something like this:

$(document).ready(function() {

  $('#button-1').click(function() {
    $(this).css({
      background: 'grey'
    });
    $('#button-2').click(function() {
      $(this).css({
        background: 'grey'
      });
      $('#button-3').click(function() {
        $(this).css({
          background: 'grey'
        });
        $('#congrat-box').fadeIn(1200);
      });
    });
  });

});

.button {
  height: 30px;
  width: 30px;
  border-radius: 12px;
  background: blue;
  color: gold;
  border: 1px solid white;
  box-shadow: 0 0 3px grey;
}
#congrat-box {
  background: orange;
  font-size: 24px;
  line-height: 50px;
  padding: 20px;
  text-align: center;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="button-1" class="button">1</button>
<button id="button-2" class="button">2</button>
<button id="button-3" class="button">3</button>
<div id="congrat-box">Congrats!!!</div>

rvighne · Accepted Answer · 2014-12-31 04:09:33Z

Here's the relevant part:

$('#button-1').click(function () {
    $('#button-2').click(function () {
        $('#button-3').click(function () {
            $('.button').css({background: 'grey'});
            $('#congrat-box').fadeIn(1200);
        });
    });
});

What's happening is that when #button-1 is clicked, it adds an event listener for when #button-2 is clicked, which adds an event listener for #button-3's click, which finally makes all .button's gray. You're not making each individual button gray as it is clicked.

Solution:

$('#button-1').click(function () {
    $(this).css({background: 'grey'});
    $('#button-2').click(function () {
        $(this).css({background: 'grey'});
        $('#button-3').click(function () {
           $(this).css({background: 'grey'});
            $('#congrat-box').fadeIn(1200);
        });
    });
});

On each click it will add the next button's listener as well as make itself gray. Demo.

Bhojendra Rauniyar · Accepted Answer · 2014-12-31 04:10:17Z

1

You can simply modify your code like this:

$('[id^="button"]').click(function () {
   $(this).css({background: 'grey'});
   if($(this).is('[id="button-3"]')){  
      $('#congrat-box').fadeIn(1200);
   }
});

answered Dec 31, 2014 at 4:10

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Comments

lwalden · Accepted Answer · 2014-12-31 04:10:44Z

1

This line $('.button').css({background: 'grey'}); is only executed when this function is hit: $('#button-3').click(function () { if you want each button in turn to turn grey apply the css class to the desired button on each click event, rather than only on the 3rd click event.

answered Dec 31, 2014 at 4:10

lwalden

8037 silver badges11 bronze badges

Comments

Mohamed-Yousef · Accepted Answer · 2014-12-31 04:14:58Z

1

You need to use $(this) and if you won't use css array just use .css('background','gray');

$(document).ready(function() {
      $('#button-1').click(function () {
          $(this).css('background', 'grey');
          $('#button-2').click(function () {
            $(this).css('background', 'grey');
            $('#button-3').click(function () {
                $(this).css('background', 'grey');
                $('#congrat-box').fadeIn(1200);
            });
          });
      }); 
    });

edited Dec 31, 2014 at 4:14

answered Dec 31, 2014 at 4:06

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Comments

sanjeev shetty · Accepted Answer · 2014-12-31 05:02:12Z

0

$(document).ready(function() {

$('#button-1').click(function () {
    $('.button').css({background: 'grey'});
    $('#button-2').click(function () {
        $('.button').css({background: 'grey'});
        $('#button-3').click(function () {
            $('.button').css({background: 'grey'});
            $('#congrat-box').fadeIn(1200);
        });
    });
});

});

answered Dec 31, 2014 at 5:02

sanjeev shetty

4584 silver badges17 bronze badges

Collectives™ on Stack Overflow

change background color of specific button on click

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related