Forum Moderators: open

Message Too Old, No Replies

Attaching onclick to img elements doesn't work

         

shammi007

9:41 am on Sep 27, 2014 (gmt 0)

10+ Year Member



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

11:52 am on Sep 27, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

6:25 pm on Sep 27, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

1:02 pm on Sep 29, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

3:50 pm on Sep 29, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

6:52 pm on Sep 29, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

3:57 am on Sep 30, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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.) ::