My "toggle class" javascript is not working

Question

I am using this little script to toggle classes of an element on click of another element. Here is the stripped down code:

//Toggle comments
function togglecomments() {
    function shiftcomments() {
        var comments = document.getElementsByTagName('aside')[0];
        if(comments.className = "hide"){comments.className = "show";}
        else{comments.className = "hide";};
    }
    var commenttoggle = document.getElementById('toggle-comments');
    bindEvt(commenttoggle, "click", shiftcomments);


}
bindEvt(window, "load", togglecomments);

The thing is it works once, but after that on click the class does not toggle anymore. For those interested here is the event handler I use: http://pastebin.com/md3dPvMJ (It worked fine before so it shouldn't be the problem.)

Any ideas what I did wrong?

Thanks for your feedback guys!

You are missing an equal sign at the if statement. 1 equal is for assignment (eg: `myvar = 1;`) and 2 or 3 for comparison (eg: `if (myvar == 1) ...`). — Ricardo Souza, Sep 15 '12 at 01:53
@MikeRobinson Yes indeed any suggestions to improve my code? :p — cmplieger, Sep 15 '12 at 01:54
Welcome to JavaScript equality, get ready to lose some hair. — Aesthete, Sep 15 '12 at 02:18

score 1 · Accepted Answer · edited May 23 '17 at 12:29

In your if statements you've got this:

if(comments.className = "hide")

It should be:

if(comments.className === "hide")

This would also work:

if(comments.className == "hide")

What you are actually doing up there is changing the className to "hide", not checking for equality.

For the difference between == and === I'll actually point you to another question here at stackoverflow: Which equals operator (== vs ===) should be used in JavaScript comparisons?

score 0 · Answer 2 · answered Jun 23 '15 at 07:07

0

This is a little function I'm using, with jQuery, but it can be updated.

        toggleClass = function (obj, className) {
            var currentClass = $(obj).attr('class'),
                hasIt = false;
            if (currentClass.indexOf(className) < 0) {
                currentClass += " " + className;
                hasIt = true;
            } else {
                currentClass = currentClass.replace(className, "");
                hasIt = false;
            }

            $(obj).attr('class', currentClass);
            return hasIt;
        };

answered Jun 23 '15 at 07:07

Bitzu

125
2
11

The problem with index of would be that it doesn't stop on words. Example: HTML: `
`. If you call toggleClass with `className=clazz` the `indexOf` would return >=0 and this would result in `
`.
– Alexander Jun 26 '15 at 08:51
That is if you don't namespace your classes. – Bitzu Jun 26 '15 at 13:00

My "toggle class" javascript is not working

2 Answers2