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

Question

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.

xdazz · Accepted Answer · 2014-06-06 09:28:08Z

2

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);

answered Jun 6, 2014 at 9:28

xdazz

161k38 gold badges255 silver badges278 bronze badges

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

Comments

Yuliam Chandra · Accepted Answer · 2014-06-06 09:30:11Z

1

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

answered Jun 6, 2014 at 9:30

Yuliam Chandra

14.7k12 gold badges56 silver badges70 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related