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
– Ricardo Souza, Commented Sep 15, 2012 at 1:53
@MikeRobinson Yes indeed any suggestions to improve my code? :p — cmplieger
– cmplieger, Commented Sep 15, 2012 at 1:54
Welcome to JavaScript equality, get ready to lose some hair. — Aesthete
– Aesthete, Commented Sep 15, 2012 at 2:18

Community · Accepted Answer · 2017-05-23 12:29:57Z

1

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?

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Sep 15, 2012 at 1:54

Paulo R.

15.7k4 gold badges33 silver badges42 bronze badges

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

Comments

Bitzu · Accepted Answer · 2015-06-23 07:07:11Z

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, 2015 at 7:07

Bitzu

1332 silver badges11 bronze badges

2 Comments

Alexander Over a year ago

The problem with index of would be that it doesn't stop on words. Example: HTML: <div class="someclazz">. If you call toggleClass with className=clazz the indexOf would return >=0 and this would result in <div class="some">.

Bitzu Over a year ago

That is if you don't namespace your classes.

Collectives™ on Stack Overflow

My "toggle class" javascript is not working

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related