CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Phil
Phil

Reputation: 36289

Button will not change color (HTML5)

I have three buttons that act much like radio buttons - where only one can be selected at one time:

<button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button>
<button id="btn-silver" name="btn-silver" type="button">Silver</button>
<button id="btn-gold" name="btn-gold" type="button">Gold</button>

For the normal, unselected state, all the buttons use a gradient background:

#btn-bronze
{
    float: left;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    width: 33%;
    height: 100%;
}

#btn-silver
{
    float: left;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
    width: 33%;
    height: 100%;
}

#btn-gold
{
    float: left;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    width: 33%;
    height: 100%;
}

When selected, the selected button should add this class to modify the background color:

.blue-selected
{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));;
}

This is done using jQuery in the method that is called when the body loads:

$("#btn-bronze").click(function() 
{

    console.log("bronze");
    $(this).addClass('blue-selected');
    $("#btn-silver").removeClass('blue-selected');
    $("#btn-gold").removeClass('blue-selected');
});

$("#btn-silver").click(function() 
{
    console.log("silver");
    $("#btn-broze").removeClass('blue-selected');
    $(this).addClass('blue-selected');
    $("#btn-gold").removeClass('blue-selected');
});

$("#btn-gold").click(function() 
{
    console.log("gold");
    $("#btn-broze").removeClass('blue-selected');
    $("#btn-silver").removeClass('blue-selected');
    $(this).addClass('blue-selected');
});

When I click one of these buttons, the console log message appears, but the background color remains the same. What am I doing wrong? Here is the fiddle.

Upvotes: 0

Views: 911

Answers (3)

Mike Robinson
Mike Robinson

Reputation: 25159

I would fix a couple of things.

Use class instead of ID targeting. I left the IDs in, but you don't really need them now:

<button class="btn" id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button>
<button class="btn" id="btn-silver" name="btn-silver" type="button">Silver</button>
<button class="btn" id="btn-gold" name="btn-gold" type="button">Gold</button>

Then I would use these styles. This way I could add more buttons without creating new styles: 

 .btn
 {
   float: left;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
   width: 33%;
   height: 100%;
}

.btn:first-child {
   -webkit-border-top-left-radius: 6px;
   -webkit-border-bottom-left-radius: 6px;
}

.btn:last-child {
   -webkit-border-top-right-radius: 6px;
   -webkit-border-bottom-right-radius: 6px;
}

.btn.blue-selected
{
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));
}

Finally, I would simplify the hell out of the javascript: 

$(".btn").click(function () {
    $(".btn").removeClass("blue-selected");
    $(this).addClass('blue-selected');
});

http://jsfiddle.net/4ZygH/1/

Upvotes: 2

Novelist
Novelist

Reputation: 479

A ID selector have a more priority then an class selector. You could use important in your css code.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

#btn-bronze has a higher specificity than .blue-selected, so its background takes precedence.

You can get around this by using !important, but that's probably not the best solution.

The most reliable would be if the parent element also has an ID, then you can select #parent-element>.blue-selected and get a higher specificity.

Upvotes: 1

Related Questions