Setting onclick dynamically and passing in the element itself to access innerHTML

Question

I'm dynamically creating some <div> elements and then filling their innerHTML properties with text. I'm trying to set their onclick event handlers like this:

myDiv.onclick = function() { alert("Hello!") };

That I can do. What I would like to do is be able to access the value / innerHTML (new to JavaScript and DOM, so I'm unsure of what term is what I'm looking for) within the newly defined onclick function. How would I go about accessing the data of myDiv within the function being defined for its onclick property? myDiv will be something simple like:

<div>StackOverflow</div>

Any help would be greatly appreciated!

"Contents" is the correct term I think.

J. K.
– J. K.

2011-11-18 11:33:27 +00:00
Commented Nov 18, 2011 at 11:33 — J. K.
– J. K., Commented Nov 18, 2011 at 11:33

J. K. · Accepted Answer · 2011-11-18 11:31:37Z

23

The onclick handler is executed in the context of the element.

myDiv.onclick = function () { alert(this.innerHTML); };

answered Nov 18, 2011 at 11:31

J. K.

8,3781 gold badge38 silver badges36 bronze badges

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

1 Comment

Nick Van Hoogenstyn Over a year ago

Doh! This must have been the only thing I didn't try. Thanks a lot!

Matt · Accepted Answer · 2011-11-18 11:32:26Z

4

Inside the handler, this will refer to the element.

myDiv.onclick = function() { alert(this.innerHTML) };

Tadaaa :).

answered Nov 18, 2011 at 11:32

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Comments

Mike Sav · Accepted Answer · 2011-11-18 11:34:23Z

0

I think what you're after is:

myDiv.onclick = function () { 
    alert(this.innerHTML); 
    };

Personally I'd stay away from innerText (due to browser issues) and use innerHTML as a rule

answered Nov 18, 2011 at 11:34

Mike Sav

15.4k31 gold badges104 silver badges150 bronze badges

Collectives™ on Stack Overflow

Setting onclick dynamically and passing in the element itself to access innerHTML

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related