Setting an event with DOM javascript

Question

I am trying to set an event in JavaScript but it is not really working. I am pretty sure I am doing it correctly too.

// in index.htm:
function foo() {
  // Load gets code from a php file via ajax
  document.getElementById('div').innerHTML = load('phppage.php');
  document.getElementById('element').onClick = func;
}

// in lib.js:
function func() { alert('Working'); }

Unfortunately... it never alerts 'Working'. I have Google Chrome and I even inspected the element in the developer tools and found that the onClick property was infact func()... I don't understand why this wont work.

I do have extensive use of ajax. The element 'element' is actually loaded with ajax

Answer 1

Try changing it to "onclick"

Answer 2

I think the onclick property is lowercase. However, you should use event attaching methods.

element.addEventListener('click',func);

(and attachEvent for Internet Explorer)

Answer 3

Of course, there are plenty of frameworks out there to handle the cross browser issues for doing this, such as:

ExtJS

JQuery

Answer 4

HTML attributes are not, but javascript properties are case-sensitive. You need to use onclick to set the event handler.