Problems changing a class with Javascript

Question

So, I've been having problems getting my JavaScript to keep a element's class changed. Whenever I try and change the element's class to "overlist" it works for less than a second, and then reverts it right back to it's original state, underlist. I cannot figure out a way to make it so the class stays.

HTML:

<ul class="overlist">
    <li>
        <a onClick="activateTutorials()">Tutorials</a>
        <ul class="underlist Tutorials">
            <li>
                <a href="#" onClick="frame(1)">Filler Text</a>
            </li>
            <li>
                <a href="#" onClick="frame(2)">More Filler Text</a>
            </li>
            <li>
                <a href="#" onClick="frame(3)">Foo Tutorial</a>
            </li>
            <li>
                <a href="#" onClick="frame(4)">More foo Tutorial</a>
            </li>
            <li>
                <a href="#" onClick="frame(5)">Foo Guide</a>
            </li>
        </ul>
    </li>

CSS:

.underlist {
    display: none;
}

Javascript:

function activateTutorials(){

    if(document.getElementsByClassName('Tutorials').classList.contains('underlist')){

        document.getElementsByClassName('Tutorials').classList.remove('underlist');

    }else{

         document.getElementsByClassName('Tutorials').classList.add('underlist');

    }
};

Is that the right code? Nothing there would change underlist to overlist under any circumstances. — Paul Roub
– Paul Roub, Commented Jul 29, 2014 at 18:11
Sorry, hold up, I thought I copied the whole section. My bad. Edit: I forgot the parenthesis on the end of the function, but if you could explain why it wouldn't change that would be much appreciated, I'm rather new to learning about changing classes. — Collin K
– Collin K, Commented Jul 29, 2014 at 18:12
None of the Javascript code ever adds "overlist" to anything. It's just adding or removing "underlist". By which I mean, literally, the word "overlist" does not occur in the code. — Paul Roub
– Paul Roub, Commented Jul 29, 2014 at 18:17
Yeah, I just realized that, and realized I miss-typed my objective, thanks. — Collin K
– Collin K, Commented Jul 29, 2014 at 18:20
Just a suggestion: if you're just starting out, you may find it easier to begin with learning the jQuery library and then going back later to DOM manipulation in vanilla JS. With jQuery, that function could be written (assuming you give your a the id 'underlistToggle') $("a#underlistToggle").click(function() { $(".Tutorials").toggleClass("underlist"); }); Example jsFiddle. Just a suggestion and personal opinion--again, I know there are any number of reasons you might not want to use jQuery. — Ryan Mitchell
– Ryan Mitchell, Commented Jul 29, 2014 at 18:23

SuperNOVA · Accepted Answer · 2014-07-29 18:16:10Z

1

Some debugging thoughts: Well, firstly you should have checked if the function was running or not(it wasn't for me) I modified it like this:

<a href="#" onClick="javascript:activateTutorials();" class="Tutorials">Tutorials</a>

Secondly, getElementsByClassname returns an array so modify your script like this:

function activateTutorials(){
console.log(document.getElementsByClassName('Tutorials'));
    if(document.getElementsByClassName('Tutorials')[0].classList.contains('underlist'))
 {
     document.getElementsByClassName('Tutorials')[0].classList.remove('underlist');
 }else{
     document.getElementsByClassName('Tutorials')[0].classList.add('underlist');
 }
};

You might have noticed a console statement in the begining of your function, it is a means of debugging(in chrome access it with Ctrl+Shift+J).

answered Jul 29, 2014 at 18:16

SuperNOVA

7617 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Problems changing a class with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related