Translating jQuery toggle code to JavaScript

Question

I'm trying to translate some jQuery to toggle a button/responsive menu and just can't get my version to work. I know most people are pretty jazzed about jQuery but we aren't allowed to use it in our class projects, so I really need to understand the how/why of my code not working.

jQuery Code:

var content = $('main');
$('button').click(function () {
    ($('i').hasClass('fa-bars')) ?
    $('i').removeClass('fa-bars').addClass('fa-times'):
        $('i').removeClass('fa-times').addClass('fa-bars');
    $('ul').toggleClass('nav-visible');
    content.toggleClass('active');
});

JavaScript Code:

var content = document.querySelector('main');
var button = document.querySelector('button');

function clickListener(button) {
    "use strict";
    button.addEventListener('click', function () {
        var i = document.querySelector('i');
        if (i.contains('fa fa-bars') === true) {
            i.remove('fa fa-bars');
            i.add('fa fa-times');
        } else {
            i.remove('fa fa-times');
            i.add('fa fa-bars');
        }
        var ul = document.querySelector('ul');
        ul.toggleClass('nav-visible');
        content.toggleClass('active');
    });
}

However, the jQuery equivalent code in JavaScript is not working.

where is clickListener called? I only see its declaration

Andrea
– Andrea

2016-04-01 05:57:41 +00:00
Commented Apr 1, 2016 at 5:57 — Andrea
– Andrea, Commented Apr 1, 2016 at 5:57
@Sindico - I don't think I call the clickListener.

agaluser
– agaluser

2016-04-01 19:28:02 +00:00
Commented Apr 1, 2016 at 19:28 — agaluser
– agaluser, Commented Apr 1, 2016 at 19:28

Tushar · Accepted Answer · 2016-04-04 01:31:43Z

2

Use querySelector to select an element
addEventListner to bind event
classList API to add, remove, has and toggle a class.

jQuery Code:

var content = $('main');
$('button').click(function () {
    ($('i').hasClass('fa-bars')) ? $('i').removeClass('fa-bars').addClass('fa-times'):
         $('i').removeClass('fa-times').addClass('fa-bars');
    // This is same as
    // $('i').toggleClass('fa-times fa-bars');


    $('ul').toggleClass('nav-visible');
    content.toggleClass('active');
});

Equivalent JavaScript Code:

var content = document.querySelector('main'); // Same as $('main')

// bind click event on first <button> element
document.querySelector('button').addEventListener('click', function() {

    // Toggle classes
    document.querySelector('i').classList.toggle('fa-bars');
    document.querySelector('i').classList.toggle('fa-times');

    document.querySelector('ul').classList.toggle('nav-visible');
    content.classList.toggle('active');
}, false);

Demo

edited Apr 4, 2016 at 1:31

answered Apr 1, 2016 at 5:57

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

3 Comments

Amadan Over a year ago

Note: this will only work if you only have one <main>, one <button>, one <i>, one <ul>. jQuery makes you not worry about plurality; if you have multiple of any of those, you'd need to use querySelectorAll and iteration. It also makes some reasonable assumptions about .fa-bars and .fa-times being complementary, and untouched by any other manipulation.

agaluser Over a year ago

@Tushar I tried your code and it still isn't working. I have a code pen with the jQuery and one with the JS. I think based on a comment above i still need to call the clickListener but haven't implemented it correctly. Nav Reveal (JS) codepen.io/aaknitta/pen/MyEoLa Nav Reveal (JQuery) codepen.io/aaknitta/pen/aNLyLq

Tushar Over a year ago

@agaluser i've updated answer. Check this demo

Collectives™ on Stack Overflow

Translating jQuery toggle code to JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related