Javascript innerHTML with onclick not working

Question

I have some AJAX, it pulls in the following, which is added to a div using innerHTML.

<a href="#" onclick="javascript:document.getElementById('textareax').value += '\r\nTEST';">Add</a>

Then when I press the "Add" link, it will add "TEST" into textareax.

If I have it in the HTML of the document from the start, it works perfectly, but when I pull it in using AJAX and using innerHTML to add it to the div the "Add" link does not work.

I think it might be a problem because it has javascript in it and I am just adding it using innerHTML, but don't know how to solve this.

Can you show some more code, like how you do your Ajax request? — talnicolas
– talnicolas, Commented Nov 16, 2011 at 17:07
Yea, I'm pretty sure event binding doesn't work if you do that. Can you create the DOM with createElement() and attach your event handler manually? That's the way I always do it.. — Mike Christensen
– Mike Christensen, Commented Nov 16, 2011 at 17:08
there has been a very similar question about this issue just yesterday. Check out the answers on this question: stackoverflow.com/questions/8145244/…. Maybe this can help you — GNi33
– GNi33, Commented Nov 16, 2011 at 17:10
Hmm nevermind, just tried it with innerHTML and events bind (Both IE and Firefox).. I think you need to post more code! — Mike Christensen
– Mike Christensen, Commented Nov 16, 2011 at 17:11
possible duplicate of Can scripts be inserted with innerHTML? — Quentin
– Quentin, Commented Nov 16, 2011 at 17:14

pimvdb · Accepted Answer · 2011-11-16 17:13:31Z

2

\r\n is a newline, but is parsed by JavaScript already. The innerHTML will be set to:

<a href="#" onclick="javascript:document.getElementById('textareax').value += '
TEST';">Add</a>

which does not work (a syntax error; JavaScript strings cannot have literal newlines).

You'd need to double-escape with \\r\\n so that it becomes \r\n when it is parsed by JavaScript (\\ becomes \ and the r will be unaffected). Then the \r\n will be kept in the onclick handler, so that the newline is indeed added to the textarea: http://jsfiddle.net/r6bhE/.

answered Nov 16, 2011 at 17:13

pimvdb

155k80 gold badges313 silver badges358 bronze badges

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

1 Comment

David19801 Over a year ago

Thanks! For future readers: I'm now using \\r\\n in the php output. problem was I was not escaping the \r and \n in the php output.

The Moof · Accepted Answer · 2011-11-16 17:19:49Z

1

onclick="javascript:document[...] is incorrect syntax. The onclick attribute is a javascript event, and doesn't need the javascript scheme indication. You can just place the script directly into the attribute value:

<a href="#" onclick="document.getElementById('textareax').value += '\r\nTEST';">Add</a>

It's also a good idea to return a value when intercepting mouse events (true to pass the event on, false to cancel it).

answered Nov 16, 2011 at 17:19

The Moof

8045 silver badges10 bronze badges

Collectives™ on Stack Overflow

Javascript innerHTML with onclick not working

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related