CODEWITHSUNDEEP
jquerycss
CRABOLO
CRABOLO

Reputation: 8793

change background color of specific button on click

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.

Upvotes: 0

Views: 2409

Answers (6)

sanjeev shetty
sanjeev shetty

Reputation: 458

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

});

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 1

lwalden
lwalden

Reputation: 803

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.

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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

Upvotes: 1

rvighne
rvighne

Reputation: 21897

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.

Upvotes: 1

Ian Hazzard
Ian Hazzard

Reputation: 7771

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>

Upvotes: 1

Related Questions