not changing color when clicking button

Question

i am using bootstrap to change the button color when clicked, but i think i am doing something wrong and the button is not changing it's color when i am clicking the button.

this is my button code -

<td>
     <a class="mylink" href="#"><button class="btn btn-default btn-xs">{% trans %}Allow{% endtrans %}</button></a>
</td>

this is my javascript code ---

<script type="text/javascript">
        $(document).ready(function() {
        if (localStorage.getItem('isCliked'){
        $("#mylink").addClass('btn-success');
                $("#mylink").removeClass('btn-default');
        }
        $('#mylink').on('click', function() {
        $(this).addClass('btn-success');
                $(this).removeClass('btn-default');
                // set the value upon clicking
                localStorage.setItem('isCliked', true)
        });

i need to change the button color when clicked and when the page is called again it should check whether it is activated or not.

Can anyone help me to solve this problem.

@Abhitalks well, I don't see that in the [spec](http://www.w3.org/TR/html-markup/a.html#a-changes), see what 'phrasing content' mean — Hacketo, Jul 22 '15 at 08:01
@Hacketo: [*The interactive element button must not appear as a descendant of the a element*](http://www.w3.org/TR/html-markup/button.button.html#button.button-constraints) and [*Content model: Transparent, but there must be no interactive content descendant.*](http://www.w3.org/TR/html51/semantics.html#the-a-element) — Abhitalks, Jul 22 '15 at 08:03
@Hacketo: And also vice-versa: [*The interactive element a must not appear as a descendant of the button element*](http://www.w3.org/TR/html-markup/a.html#a-constraints) — Abhitalks, Jul 22 '15 at 08:05

score 2 · Accepted Answer · answered Jul 22 '15 at 07:38

2

Probably the problem is here.

$("#mylink")

This selects the element with the id="mylink" and not the element with the class="mylink"

If you want to select a class, go for this.

$(".mylink")

CSS Selectors: w3schools

answered Jul 22 '15 at 07:38

NDY

3,527
4
48
63

Abraar Arique Diganto · Answer 2 · 2015-07-22T07:51:23.457

1

First of all, mylink is a class in your code.

<a href="#" class="mylink">

But in jQuery you're using an ID ($("#mylink")). Also, <a> is an ascendent of <button>. So correct your every bit of $("#mylink") to:

$(".mylink button")

That way you'll be targeting the <button> tag inside your <a> tag with class .mylink.

Reference: http://www.w3schools.com/jquery/jquery_ref_selectors.asp

edited Jul 22 '15 at 07:51

answered Jul 22 '15 at 07:39

Abraar Arique Diganto

1,215
16
24

score 0 · Answer 3 · edited May 23 '17 at 11:44

0

With $('#someID') you are selecting something by it's id. But you use classes ("myLink") so you should use $(".myLink").

And despite that you make it more complicated than it needs to be. Maybe you want to try to do it just with css.

Here is an example which is very similar to your question: Pressed <button> CSS

edited May 23 '17 at 11:44

Community

1
1

answered Jul 22 '15 at 07:46

Gwny

167
1
9

score 0 · Answer 4 · answered Jul 22 '15 at 07:53

There are some errors in your code:

It is jQuery, not JavaScript (it's a little bit different)
You are changing the <a> class "myLink" NOT the <button> class
You are referring to a class (".myClassName") as a id ("#myIdName")
Others things (i.e. how javascript handle the DOM element)... you should read and study a little bit more.

Anyway, I've made you a working fiddle.

not changing color when clicking button

4 Answers4