I Have to alert() the Object?

**iam_clint** · Oct 22 '08, 03:11 PM

This little test code I slapped together worked fine with and without the alert

Code:

<html>
<body>
<script>
function test() {
	var img_buttnz = document.getElementsByTagName('IMG'); 
	for (var z = 0; z<img_buttnz.length; z++) { 
		if (img_buttnz[z].id!="") { 
			img_buttnz[z].onclick=function() { alert(this.id); }
		} 
	} 
}
window.onload=function() { test(); }
</script>
<img src="" id="whateva1" name="whateva"><img src="" id="whateva2" name="whateva"><img src="" id="whateva3" name="whateva"><img src="" id="whateva4" name="whateva"><img src="" id="whateva5" name="whateva"><img src="" id="whateva6" name="whateva">
</body>
</html>

**holisticnetworking** · Oct 22 '08, 03:24 PM

Originally posted by iam_clint

This little test code I slapped together worked fine with and without the alert. . .

Thanks again, Clint. I don't get what's going on with this one. Any ideas what *might* be causing a problem? The code is about as basic as it gets, yet it doesn't want to work.

It may also help to note that this seems to be an issue for FF and not for IE.

**gits** · Oct 22 '08, 03:35 PM

are you waiting for the page to be loaded completely (have a look at the onload-trigger in iam_clint's code) so that you may use the dom-methods reliably?

show your addEvent()-function ... and may be you could tell what the problem is? what did you expect and what do you get?

kind regards

**holisticnetworking** · Oct 22 '08, 05:17 PM

Originally posted by gits

are you waiting for the page to be loaded completely (have a look at the onload-trigger in iam_clint's code) so that you may use the dom-methods reliably?

show your addEvent()-function ... and may be you could tell what the problem is? what did you expect and what do you get?

kind regards

The addEvent function:

Code:

function addEvent(elm, evType, fn, useCapture) {
	elm["on"+evType]=fn;return;
}

The code originally posted is added to the page with the same addEvent function, loading on window load. What I expected was to add a function to the images which would happen onClick, but what I got was nothing at all.

I've also added an alert() inside the conditional to see if it would tell me something happened, and it did nothing.

**gits** · Oct 22 '08, 05:55 PM

so i assume you want to do something like the following:

[HTML]<html>
<body>
<script>
function test() {

var img_buttnz = document.getEle mentsByTagName( 'IMG');

for (var z = 0; z < img_buttnz.leng th; z++) {
if (img_buttnz[z].id != "") {
var f = function(el) {
addEvent(el, 'click', function() { alert(this.id); }) ;
}(img_buttnz[z]);
}
}

}

function addEvent(elm, evType, fn, useCapture) {
elm["on"+evType]=fn;
return;
}

addEvent(window , 'load', function() { test(); });

</script>

<img src="" id="whateva1" name="whateva">
<img src="" id="whateva2" name="whateva">
<img src="" id="whateva3" name="whateva">
<img src="" id="whateva4" name="whateva">
<img src="" id="whateva5" name="whateva">
<img src="" id="whateva6" name="whateva">

</body>
</html>
[/HTML]
as you see you should use a closure when adding the events in a loop.

kind regards

**holisticnetworking** · Oct 22 '08, 06:06 PM

Originally posted by gits

so i assume you want to do something like the following:

[HTML]
for (var z = 0; z < img_buttnz.leng th; z++) {
if (img_buttnz[z].id != "") {
var f = function(el) {
addEvent(el, 'click', function() { alert(this.id); });
}(img_buttnz[z]);
}
}

[/HTML]
as you see you should use a closure when adding the events in a loop.

kind regards

I'm not sure I understand what that "(img_buttn z[z]);" text is doing there after the closed curly brace?

**gits** · Oct 22 '08, 06:12 PM

have a close look at it ... it defines a function that is instantly called with the current img-ele in your list as param el :)

**holisticnetworking** · Oct 22 '08, 07:05 PM

Originally posted by gits

have a close look at it ... it defines a function that is instantly called with the current img-ele in your list as param el :)

Perhaps we've gone off on a tangent. I take your point about using the enclosure (and I've never seen a closure created in that way, so it's definitely a function to study and absorb, thank you!). But I'm left with the same problem: it works fine in IE but not in FireFox. By adding in the alert() message, it suddenly works in both versions. THIS is primarily what brought me to your awesome forums today. Do you have any idea why this would be a problem for FF?

I noticed that my code was taking other images on the page into consideration. Since I don't want that, I've modified the code slightly and it's written below.

Code:

	var panels = document.getElementsByClassName('panel');
	for(var z = 0; z < panels.length; z++) {
        // alert(panels[z].id);
		var buttnz = panels[z].getElementsByTagName('IMG');
		for(var q = 0; q < buttnz.length; q++) {
            var f = function(el) { 
                addEvent(el, 'click', function() { k.changeFile(this); }) ;
            }(buttnz[q]);
        } 
    }

**gits** · Oct 22 '08, 08:07 PM

?? ... i tested it with FF ... it should work. do you get an alert when using:

[CODE=javascript]addEvent(el, 'click', function() { alert('foo'); }) ;[/CODE]
for the above line 7.?

**holisticnetworking** · Oct 22 '08, 08:30 PM

Originally posted by gits

?? ... i tested it with FF ... it should work. do you get an alert when using:

[CODE=javascript]addEvent(el, 'click', function() { alert('foo'); }) ;[/CODE]
for the above line 7.?

Same thing. And I know that it should work. The trouble is that it doesn't work. I'm trying to figure out why that would be. Any guesses? Should I post the entire function to see how it goes together? That's looking like it might be necessary.

I'll have to post the entire function tomorrow when I'm back at work.

**gits** · Oct 22 '08, 08:45 PM

may be that would be a good idea ... lets have a look at this then.

kind regards

**holisticnetworking** · Oct 23 '08, 01:58 PM

Originally posted by gits

may be that would be a good idea ... lets have a look at this then.

kind regards

OK, gits. Here goes. Thanks again for all the help:

Code:

function launchKiosk() {
	k.getImages();
	var demo_container = document.getElementById('demo_container');
	var divs = demo_container.childNodes;
	for (var x = 0; x<divs.length; x++) {
		if(divs[x].tagName == 'DIV') {
			if (divs[x].getAttribute('id') == 'designs_button') {
				k.designs_button = divs[x];
				k.designs_panel = document.getElementById('designs');
			}
			if (divs[x].getAttribute('id') =='styles_button') {
				k.styles_button = divs[x];
				k.styles_panel = document.getElementById('styles');
			}
		}
	}
	if(k.designs_button && k.designs_button) {
		addEvent(k.designs_button, 'click', function() {k.changeTab(k.designs_button)});
		addEvent(k.styles_button, 'click', function() {k.changeTab(k.styles_button)});
	}
	var panels = document.getElementsByClassName('panel');
	for(var z = 0; z < panels.length; z++) {
        // alert(panels[z].id);
		var buttnz = panels[z].getElementsByTagName('IMG');
		for(var q = 0; q < buttnz.length; q++) {
            var f = function(el) { 
                addEvent(el, 'click', function() { k.changeFile(this); }) ;
            }(buttnz[q]);
        } 
    } 
}

**gits** · Oct 23 '08, 04:33 PM

just to ensure it first - you have a correct working getElementsByCl assName()-method implemented for FF and/or since this method is just natively supported with FF 3 - you test with this version?

**gits** · Oct 23 '08, 04:41 PM

the following example works as expected in FF3:

[HTML]<html>
<body>
<script>
function test() {
var panel = document.getEle mentsByClassNam e('panel')[0];
var img_buttnz = panel.getElemen tsByTagName('IM G');

for (var z = 0; z<img_buttnz.le ngth; z++) {
if (img_buttnz[z].id!="") {
var f = function(el) {
addEvent(el, 'click', function() { alert(el.id); })
}(img_buttnz[z]);
}
}

}

function addEvent(elm, evType, fn, useCapture) {
elm["on"+evType]=fn;
return;
}

addEvent(window , 'load', function() { test(); });

</script>
<div class="panel">
<img src="" id="whateva1" name="whateva">
<img src="" id="whateva2" name="whateva">
<img src="" id="whateva3" name="whateva">
<img src="" id="whateva4" name="whateva">
<img src="" id="whateva5" name="whateva">
<img src="" id="whateva6" name="whateva">
</div>
</body>
</html>
[/HTML]
does FF show any errors in the JavaScript-Console for your page?

I Have to alert() the Object?

I Have to alert() the Object?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment