Trying to apply classes on a click event using JS

Question

I'm new to JavaScript and have used the primary post about how to toggle classes from here: Change an element's class with JavaScript but for some reason my code is not executing like I would expect it to. The code is placed in the bottom of an HTML file.

<script>
$(document).ready(function () {

$('.arrow').addEventListener('click', function() {
if (this.hasClass('glyphicon-chevron-right')) {
    this.addClass('glyphicon-chevron-left');
    this.removeClass('glyphicon-chevron-right');
    }

if (this.hasClass('glyphicon-chevron-left')) {
    this.addClass('glyphicon-chevron-right');
    this.removeClass('glyphicon-chevron-left');
    }
}, false);

});
</script>

jQuery uses on to add events; not addEventListener

megawac
– megawac

2014-06-20 20:23:14 +00:00
Commented Jun 20, 2014 at 20:23 — megawac
– megawac, Commented Jun 20, 2014 at 20:23

Ruan Mendes · Accepted Answer · 2014-06-20 20:46:52Z

4

Set up a click listener and use .toggleClass() instead of those if clauses:

$('.arrow').on('click', function() {
    $(this).toggleClass('glyphicon-chevron-right');
    $(this).toggleClass('glyphicon-chevron-left');
});

Or more succinctly

$('.arrow').on('click', function() {
    $(this).toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
});

edited Jun 20, 2014 at 20:46

Ruan Mendes

92.7k31 gold badges162 silver badges225 bronze badges

answered Jun 20, 2014 at 20:24

martynas

12.3k3 gold badges59 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rodney G Over a year ago

And even $(this).toggleClass("glyphicon-chevron-right glyphicon-chevron-left")

martynas Over a year ago

@JuanMendes i am aware of that. I though it would be more clear this way.

Ruan Mendes Over a year ago

@martynas Now the OP is also aware of that ;)

War Gravy Over a year ago

Thanks guys, so I don't need to wrap this code in anything to make sure the document is ready? EDIT: Nevermind I figure it out, thanks again.

Ruan Mendes Over a year ago

@WarGravy Yes, you should still make sure the document is ready. This snippet is just what needs to be changed from your original script

James McDonnell · Accepted Answer · 2014-06-20 20:24:27Z

2

Just use the jQuery click event.

$('.arrow').click(function() {
    if (this.hasClass('glyphicon-chevron-right')) {
        this.addClass('glyphicon-chevron-left');
        this.removeClass('glyphicon-chevron-right');
    }
    if (this.hasClass('glyphicon-chevron-left')) {
        this.addClass('glyphicon-chevron-right');
        this.removeClass('glyphicon-chevron-left');
    }
});

if you want to add the event specifically with an event listener you would probably have to select the actual element instead of the jQuery object: $('.arrow')[0]

answered Jun 20, 2014 at 20:24

James McDonnell

3,7101 gold badge23 silver badges26 bronze badges

Collectives™ on Stack Overflow

Trying to apply classes on a click event using JS

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related