Attaching onclick to img elements doesn't work

[shammi007]

function prepareEventHandlers() {
var myImga = document.getElementsByTagName('img');

myImga.onclick = function () {
alert("This is Eminem Known As RAP God. The Best Rapper ever");
}
}

window.onload = function () {
prepareEventHandlers();
}
why this function is not running in JavaScript.

[Fotiman]

Welcome to WebmasterWorld!

myImga is a collection of elements. So you need to do something more like this:

function prepareEventHandlers() { 
  var myImga = document.getElementsByTagName('img'),
    i,
    n;

  for (i = 0, n = myImga.length; i < n; i++) {
    myImga[i].onclick = function () { 
      alert("This is Eminem Known As RAP God. The Best Rapper ever"); 
    }
  } 
} 

window.onload = function () { 
  prepareEventHandlers(); 
} 

[lucy24]

And here I was thinking it doesn't run because the browser is not an Eminem fan.

i = 0, n = myImga.length; i < n;

What's the difference between this and

i=0; i < myImga.length;

?
(Speaking as someone who only knows about six words of javascript *)



* ... and routinely forgets them on a FIFO basis, meaning that all six currently involve canvas functions :(

[Fotiman]

getElementsByTagName returns an HTMLCollection. HTMLCollection and NodeList interfaces are similar to an array, but they can be "live", meaning they can update automatically when the underlying document changes. The example above doesn't change the underlying DOM, but a case like this would cause an infinite loop:

var myImga = document.getElementsByTagName('img'),
  i;

for (i = 0; i < myImga.length; i++) {
  document.appendChild(document.createElement('img'));
} 

Getting a static copy of the length in the loop initialization (as opposed to during each conditional check), will prevent this.

Also, performance will be better because every time the HTMLCollection length property is checked, the browser will need to reassess the collection to work out how many elements it references. Native arrays have more efficient accessors for the length property.

[lucy24]

I think I may even have understood that :)

For {starting-values}; {ending-values}; {do-after-each-loop}

= elements 2 and 3 are re-checked at the end of each iteration, while element 1 is only checked before starting? So even if the value doesn't actually change, the server, er, browser is doing more work.

[Fotiman]

It's more like this:

for (statement executed before the loop starts; condition for running the loop; statement executed each time after the loop)

Typically the first statement contains some initialization, the condition determines whether or not to run the loop, and the last statement increments/decrements/iterates the conditional properties.

[lucy24]

Well, it took me quite a while to edge beyond the straight translation of

^( +)FOR (\w+)( = -?\w+(?: ?[+-] ?\w+)?) TO (-?\w+(?: ?[+-] ?\w+)?);? *(?:'(.+))?$
 >>
\1for (\2\3; \2 <= \4; \2++) //\5\n\1 {

^( +)FOR (\w+)( = -?\w+(?: ?[+-] ?\w+)?) TO (-?\w+(?: ?[+-] ?\w+)?) STEP (\w+);? *(?:'(.+))?$
 >>
\1for (\2\3; \2 <= \4; \2 += \5) //\6\n\1 {

^( +)FOR (\w+)( = -?\w+(?: ?[+-] ?\w+)?) TO (-?\w+(?: ?[+-] ?\w+)?) STEP -1;? *(?:'(.+))?$
 >>
\1for (\2\3; \2 <= \4; \2--) //\5\n\1 {

^( +)FOR (\w+)( = -?\w+(?: ?[+-] ?\w+)?) TO (-?\w+(?: ?[+-] ?\w+)?) STEP -(\w+);? *(?:'(.+))?$
 >>
\1for (\2\3; \2 <= \4; \2 -= \5) //\6\n\1 {

Really ;) (There's a separate RegEx for closing most control structures. The only thing I never worked out how to automate was break statements in nested switch/case constructions. All done now, thankfully.)

:: emerging from deleting a slew of
context.closePath();
utterances that were unnecessary at best, harmful at worst ("Why is this ### function drawing an extraneous and unwanted line across the canvas? ... Because I told it to." Sigh.) ::