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 Jun 20 '14 at 20:23 — megawac, Jun 20 '14 at 20:23

score 4 · Accepted Answer · edited Jun 20 '14 at 20:46

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 '14 at 20:46

Juan Mendes

85,853
29
146
204

answered Jun 20 '14 at 20:24

martynas

11,924
3
52
60

And even `$(this).toggleClass("glyphicon-chevron-right glyphicon-chevron-left")` – Rodney Golpe Jun 20 '14 at 20:45
@JuanMendes i am aware of that. I though it would be more clear this way. – martynas Jun 20 '14 at 20:47
2

@martynas Now the OP is also aware of that ;) – Juan Mendes Jun 20 '14 at 20:48
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. – War Gravy Jun 20 '14 at 20:50
1

@WarGravy Yes, you should still make sure the document is ready. This snippet is just what needs to be changed from your original script – Juan Mendes Jun 20 '14 at 20:52

score 2 · Answer 2 · answered Jun 20 '14 at 20:24

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]

Trying to apply classes on a click event using JS

2 Answers2