Javascript: function with "this" undefined

Question

I'm new to Javascript and am attempting to write a function that changes the color of some text, however "this" keeps returning as undefine, and not changing the text color. Here's the code, I would greatly appreciate some help.

<h1>
    <ul><div class="info" id="info" onclick="this.style.color= '#9DC8BA'">INFO
    </div></ul>
    <ul><div class="menu" id="menu" onclick="test1()"<!--this is where the problem is-->MENU</div></ul>

Here's the Javascript

function test1() {
this.style.color= '#9DC8BA';
}

Change =test1() to =test1(this), and function test1() to function test1(div) {div.style.color='#CCC'}. — WoooHaaaa
– WoooHaaaa, Commented Oct 9, 2014 at 6:33
Your markup is invalid, a DIV can't be a child of a UL. In non–strict mode, this is never undefined. If not set in the call, or by bind, it will default to the global (window in a browser) object. Likely the console is complaining that window.style is undefined. — RobG
– RobG, Commented Oct 9, 2014 at 7:14

Prabhu Murthy · Accepted Answer · 2014-10-09 06:33:40Z

3

you have to pass the reference of the DOM element to the function

<div class="menu" id="menu" onclick="test1(this)">/div>

in the above html, this refers the current DOM element which is a DIV of id menu.

and then refer and modify the DOM inside the function

function test1(obj) {
   obj.style.color= '#9DC8BA';
}

Side note: You seem to be having a same name for class and id for the div, which is not a good practice. Always remember Class corresponds to a group of elements and ID corresponds to unique elements.

edited Oct 9, 2014 at 6:33

answered Oct 9, 2014 at 6:25

Prabhu Murthy

9,2865 gold badges32 silver badges37 bronze badges

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

4 Comments

TJ5897 Over a year ago

Thank you so much Prabhu, I apologize for wasting your time with such a simple solution, but thank you.

nikodz Over a year ago

He don't have to. There is another solution.

Prabhu Murthy Over a year ago

@Epsilon: i'm sorry did i miss something here.

nikodz Over a year ago

@Prabhu Your solutions works perfectly, just there is another way, that's all I am saying. If you set function from JavaScript, then this will work.

gp. · Accepted Answer · 2014-10-09 06:26:44Z

1

test1 function is executed not on the div element as context but on window.

do this:

onclick="test1(this)"

in function:

function test1(div) {
    div.style.color = '#9DC8BA';
}

answered Oct 9, 2014 at 6:26

gp.

8,2533 gold badges42 silver badges42 bronze badges

2 Comments

RobG Over a year ago

this is not "context", it is a parameter of an execution context. ;-)

gp. Over a year ago

I explained the current issue. As a solution, the context is being passed as parameter.

Amy · Accepted Answer · 2014-10-09 06:27:00Z

0

Html Code

<h1>
    <ul><div class="info" id="info" onclick="this.style.color= '#9DC8BA'">INFO
    </div></ul>
    <ul><div class="menu" id="menu" onclick="test1(this)">MENU</div></ul>
 </h1>

JavaScript Code:

function test1(obj) 
{ 
   obj.style.color= '#9DC8BA'; 
}

answered Oct 9, 2014 at 6:27

Amy

4,0301 gold badge22 silver badges34 bronze badges

Comments

nikodz · Accepted Answer · 2014-10-09 06:31:10Z

0

When you are writing onclick inside the html, it makes new function itself. In your case it is something like function(){test1()}. this inside this function is what you need, but this inside the test1 is undefined.

You can use this as argument of test1

... onclick="test1(this)" ...

and JS

function test1(obj) {

And use obj instead of this in test1

Or set function onclick attribute from javascript like:

var menu = document.getElementById('menu');
menu.onclick = test1;

In this case this inside the test1 will be exactly what you need.

answered Oct 9, 2014 at 6:31

nikodz

7275 silver badges13 bronze badges

Collectives™ on Stack Overflow

Javascript: function with "this" undefined

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related