CODEWITHSUNDEEP
javascripthtmldom
user1952963
user1952963

Reputation: 3

Undefined DOM element javascript, while console.log gives it out

I'm quite new in javascript and this problem is haunting me down since the very begining. When I get DOM element event behaves properly, but while I try to change anything (like class) it gives me "undefined is not a function".

I don't understand why, because in the same time console.log gives out 

<div class="nav-about menu" id="nav-about"></div>

HTML

<div class="nav-about menu" id="nav-about"></div>

JS

var link_one = document.getElementById("nav-about");

link_one.addEventListener("click", function(){
    console.log(this);
    this.addClass('special');
}, false);

I couldn't find answer to that anywhere. Yes jquery to addClass is included in head tag.

Upvotes: 0

Views: 280

Answers (2)

Yuliam Chandra
Yuliam Chandra

Reputation: 14640

try

$(this).addClass('special');

because you want to use jquery library, to use jquery library is like calling a function doSomething(this), but instead use $ as the function name

Upvotes: 1

xdazz
xdazz

Reputation: 160833

Because there is no addClass property on this, so it's undefined.

You could add the class on this.classList.

var link_one = document.getElementById("nav-about");

link_one.addEventListener("click", function(){
    this.classList.add('special');
}, false);

Upvotes: 2

Related Questions