CODEWITHSUNDEEP
javascriptjquerycss
David Van Staden
David Van Staden

Reputation: 1779

simple onclick function on button not working

I am trying to change the class of a button when clicking on it. Why isn't mine working: see my fiddle

HTML:

<button id="repeatMon" onclick="changeStyle()"><span> Mon </span></button> 
<br/>
<button id="repeatTues" data-bind="checked: repeatTues" onclick="changeStyle()"><span> Tues </span></button> 
<br/>
<button id="repeatWeds" data-bind="checked: repeatWeds" onclick="changeStyle()"><span> Weds </span></button> 
<br/>
<button id="repeatThurs" data-bind="checked: repeatThurs" onclick="changeStyle()"><span> Thurs </span></button> 
<br/>
<button id="repeatFri" data-bind="checked: repeatFri" onclick="changeStyle()"><span> Fri </span></button> 
<br/>
<button id="repeatSat" data-bind="checked: repeatSat" onclick="changeStyle()"><span> Sat </span></button> 
<br/>
<button id="repeatSun" data-bind="checked: repeatSun" onclick="changeStyle()"><span> Sun </span></button> 
<br/>

CSS:

button{
    width: 60px;
    height: 35px;
    border-radius: 0px;
    color: #cfcfcf;
    background: #0a4a58;
}

.active{
    color: #fff;
    background: ##02AEFF;
}

jQuery:

function changeStyle(){
    $(this).toggleClass('active');
}

thank you!

Upvotes: 0

Views: 192

Answers (6)

adeneo
adeneo

Reputation: 318182

You're using jQuery, remove the inline JS and do it the proper way :

$('[id^="repeat"]').on('click', function() {
    $(this).toggleClass('active');
});

FIDDLE

To toggle the active state on one button at the time :

$('[id^="repeat"]').on('click', function() {
    $(this).toggleClass('active').siblings().removeClass('active');
});

Upvotes: 5

Curtis
Curtis

Reputation: 103358

<button id="repeatSun" data-bind="checked: repeatSun" onclick="changeStyle(this)"><span> Sun </span></button> 

function changeStyle(btn){
    $(btn).toggleClass('active');
}

Alternatively a better method would be to add click event handlers with your jQuery.

Add the same class to all your buttons and apply a click event handler to that class:

<button id="repeatSun" data-bind="checked: repeatSun" class="changestyle"><span> Sun </span></button>

$(".changestyle").click(function(){
   $(".changestyle").removeClass('active');
   $(this).addClass('active');
});

Upvotes: 4

Jako
Jako

Reputation: 4901

What about something like this:

$("button").click(function () {
    $(this).toggleClass('active');
});

http://jsfiddle.net/VUmza/26/

EDIT: Only one button at a time.

http://jsfiddle.net/VUmza/39/

$("button").click(function () {
    $( "button" ).each(function() {
      $(this).removeClass("active");
    });

    $(this).toggleClass('active');
});

Upvotes: 1

Panos Bariamis
Panos Bariamis

Reputation: 4653

You are using jquery so you don't have to repeat yourself. Remove onclick from button and do it with jquery

<button id="repeatMon"><span> Mon </span></button> <br/>
<button id="repeatTues" data-bind="checked: repeatTues"><span> Tues </span></button><br/>
<button id="repeatWeds" data-bind="checked: repeatWeds"><span> Weds </span></button><br/>
<button id="repeatThurs" data-bind="checked: repeatThurs"><span> Thurs </span></button><br/>
<button id="repeatFri" data-bind="checked: repeatFri"><span> Fri </span></button><br/>
<button id="repeatSat" data-bind="checked: repeatSat"><span> Sat </span></button><br/>
<button id="repeatSun" data-bind="checked: repeatSun"><span> Sun </span></button><br/>

remove the extra hash (#) from your color in css in class active

.active {
    color: #fff;
    background: #02AEFF;
}

and write the script

$(function() {
    var buttons = $('button[id^="repeat"]');
    buttons.click(function() {
        buttons.removeClass('active');
        $(this).addClass('active');
    });
});

jsfiddle

Upvotes: 2

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

try this:

<button id="repeatMon" class="clickable"><span> Mon </span></button>

Jquery inside document.ready()

$('.clickable').click(function(){
    $(this).toggleClass('active');
});

DEMO

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You need to pass the button.

function changeStyle(e){
    $(e).toggleClass('active');
}

And in the HTML:

<button id="repeatSun" data-bind="checked: repeatSun" onclick="changeStyle(this)"><span> Sun </span></button>

Upvotes: 1

Related Questions