el.classList is undefined
Solution 1
signIn
is the result of document.getElementsByClassName('sign_in modal')
- getElementsByClassName
returns a collection - so you have to reference the index you want:
console.log(signIn[0].classList);
Demo: https://jsfiddle.net/swf5zc74/1/
Solution 2
document.getElementsByClassName returns an "array-like" collection of elements, even if there is only one element with that class name. To access elements with document.getElementsByClassName, you can use array syntax.
for exampe logIn = document.getElementsByClassName('log_in')[0]
want to add a class to that element?
document.getElementsByClassName('log_in')[0].className += " foo";
Related videos on Youtube
Angelina Bethoney
Updated on October 27, 2022Comments
-
Angelina Bethoney over 1 year
I'm trying to add a class to a div in pure JS once a link is clicked (In this case, the link has id
#switchlogin
). When I console.log my element, I am able to click through the object and see that it currently has two names in itsclassList
. However, when Iconsole.log element.classList
, I receive an "undefined". I am unsure why I'm receiving undefined, and why I cannot add my new class name.The issue is recreated here: https://jsfiddle.net/swf5zc74/
Here is a portion of my HTML:
<div class="sign_in modal"> <h1>Get Started!</h1> <form action="" method="get"> <input type="text" name="fname" placeholder="Name" required> <input type="text" name="email" placeholder="Email" required> <input type="password" name="password" placeholder="Password" required> <input type="submit" value="Submit" class="submit"> </form> <h3><a href="#" id="switchLogin">Been Here Before?</a></h3> </div>
My JS:
var body = document.getElementsByTagName('body'), signIn = document.getElementsByClassName('sign_in modal'), logIn = document.getElementsByClassName('log_in'), switchLogIn = document.getElementById('switchLogin'), switchSignIn = document.getElementById('switchSignin'), link = document.querySelector('a'); link.addEventListener("click", function(e){ if ((e.target || e.srcElement).id == 'switchLogin'){ console.log(signIn); console.log(signIn.classList); signIn.classList += ' slideOut'; }else{ console.log("nope"); } })
-
Admin over 8 yearsIf you're using
addEventListener()
, there's no reason for(e.target || e.srcElement)
. Just usee.target
. -
Angelina Bethoney over 8 yearsOkay, awesome. I used e.srcElement because I read IE doesn't support e.target. Thanks for the tip
-
ggorlen about 2 yearsDoes this answer your question? document.getElementsByClassName().innerHTML always returns "undefined"
-
ggorlen about 2 yearsNot OP's problem, but I've wound up at this thread trying to access
.classList
on aelement.nodeType === Node.TEXT_NODE
which is undefined. Beware!
-
-
Angelina Bethoney over 8 yearsOh okay. But now when I try to add my new class using .push, I receive an error that says it's not a function ` var classes = signIn[0].classList; classes.push("slideOut");` Results in
Uncaught TypeError: classes.push is not a function(…)
? -
Steve Hansell over 8 years@AngelinaBethoney Read more on classList here: developer.mozilla.org/en-US/docs/Web/API/Element/classList