Recently, I've encountered an issue with my JavaScript where I am unable to keep a particular element's class changed. Despite attempting to change the class to "overlist", it only stays that way briefly before switching back to its original state, underlist. I'm really struggling to find a solution to make the class stick.
My HTML code:
<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 code:
.underlist {
display: none;
}
Javascript code:
function activateTutorials(){
if(document.getElementsByClassName('Tutorials').classList.contains('underlist')){
document.getElementsByClassName('Tutorials').classList.remove('underlist');
}else{
document.getElementsByClassName('Tutorials').classList.add('underlist');
}
};