Question

Okay so I am building an application (for Chrome (*not extension)) and have a bunch of repeated elements on the page. So I decided to build these elements dynamically using a loop, like so:

for(var i = 1; i <= 64; i++){
    var elem = document.createElement('div');
    elem.id = "element"+i;  
    elem.onclick = "doSomething()"
    $("parentElement").appendChild(elem);
}

My issue occurs when it tries to attach my function to the onclick event. When I look at the element there is no onclick attribute on it… Even when I step through I can get to the line:

elem.onclick = "doSomething()"

Then I step again and nothing… So far I have tried with and without quotes and both .onclick and .onClick…

Thank you in advance!

Answer 1

You should pass the function itself at all times, not a string of any kind.

elem.onclick = doSomething;

This will set doSomething as the click handler.

• Using strings will call eval internally, which is slow and possibly unsafe (the latter does not apply here).
• Passing a function directly is more straight-forward.
• Strings are only necessary if you set onclick through HTML.