Applying onClick to Element Array in a For Loop

Question

I am trying to apply an onClick event to an array of elements in a document, like this:

for (var i = 0; i < myElems.length; i++)
     myElems[i].onClick = "someFunction(this)";

The code is placed inside of an init() function for the onLoad event of the body tag. I notice that when the document loads, the functions wont work.

I've noticed, that if I add an alert() to tell me if the function is the problem:

for (var i = 0; i < myElems.length; i++)
     myElems[i].onClick = "alert('It worked!')";

The document will load and perform the alert for all of the elements, without ever taking into consideration whether or not I actually clicked the element.

What am I doing wrong?

how are you calling the init function?

PitaJ
– PitaJ

2012-09-19 15:47:26 +00:00
Commented Sep 19, 2012 at 15:47 — PitaJ
– PitaJ, Commented Sep 19, 2012 at 15:47

maximumcallstack · Accepted Answer · 2014-06-03 03:17:32Z

3

You need to assign the 'onclick' handler to a function:

for (var i = 0; i < myElems.length; i++)
     myElems[i].onclick = function() { someFunction(this);};

Assigning your 'alert' call directly will fire it (as you're seeing). What you want to do is assign your handler to a function that will be called when the event is fired.

edited Jun 3, 2014 at 3:17

maximumcallstack

2,9271 gold badge23 silver badges25 bronze badges

answered Sep 19, 2012 at 15:46

David Hoerster

28.8k9 gold badges71 silver badges103 bronze badges

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

3 Comments

Dave Zych Over a year ago

What @David Hoerster is saying is that you were assigning your onClick handler to a string, not the function itself.

Pori Over a year ago

Well, I feel silly. The handler works like a charm. I also noticed the comments about the method being "onclick" rather than "onClick." Thank you all.

David Hoerster Over a year ago

@user1257262 Glad to be of help. Don't forget to mark an answer as the correct one, too. It will help your accepted answer rate and will help encourage more answers to future questions. Good luck!!

Fabrício Matté · Accepted Answer · 2012-09-19 15:52:01Z

2

The property name is onclick.

onClick even though being valid HTML, does not exist in JS as it is case-sensitive.

Also you have to assign it a function reference or expression as David answered (+1).

Fiddle

answered Sep 19, 2012 at 15:52

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

Collectives™ on Stack Overflow

Applying onClick to Element Array in a For Loop

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related