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

Matthew Abbott · Accepted Answer · 2010-07-07 17:01:08Z

4

Try changing it to "onclick"

answered Jul 7, 2010 at 17:01

Matthew Abbott

61.7k9 gold badges108 silver badges131 bronze badges

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

2 Comments

Mike Sherov Over a year ago

javascript function names are case-sensitive, so +1 for you!

Mike Sherov Over a year ago

@glambalazas, right, it's a property, not a function name. My mistake.

gblazex · Accepted Answer · 2010-07-07 17:04:57Z

1

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

answered Jul 7, 2010 at 17:04

gblazex

50.3k12 gold badges100 silver badges92 bronze badges

Comments

J. K. · Accepted Answer · 2010-07-07 17:02:57Z

0

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

element.addEventListener('click',func);

(and attachEvent for Internet Explorer)

answered Jul 7, 2010 at 17:02

J. K.

8,3781 gold badge38 silver badges36 bronze badges

Comments

Evan Trimboli · Accepted Answer · 2010-07-07 17:04:57Z

-2

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

ExtJS

JQuery

answered Jul 7, 2010 at 17:04

Evan Trimboli

30.1k6 gold badges49 silver badges68 bronze badges

2 Comments

gblazex Over a year ago

like changing a character? Oh I'm sure there are plenty of them.. It has nothing to do with browsers. Case-sensitivity is a part of the language.

Evan Trimboli Over a year ago

What on Earth are you talking about? Everyone knows that using inline handlers is poor practice (robertnyman.com/2008/11/20/…) Heck, you even advocate the same thing: stackoverflow.com/questions/3142710/inline-styles-vs-classes/… Frameworks abstract away the differences in the event models, for example shared/singleton event object or the difference between addEventListener and attachEvent. Seems you have something stuck in your behind ;)

Collectives™ on Stack Overflow

Setting an event with DOM javascript

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related