By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,848 Members | 3,223 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,848 IT Pros & Developers. It's quick & easy.

I Have to alert() the Object?

P: 13
I don't get it:

Expand|Select|Wrap|Line Numbers
  1.     var img_buttnz = document.getElementsByTagName('IMG');
  2.     for (var z = 0; z<img_buttnz.length; z++) {
  3.         alert(img_buttnz[z].id);
  4.         if(img_buttnz[z].id) {
  5.             addEvent(img_buttnz[z], 'click', function() { k.changeFile(this); });
  6.         }
  7.     }
  8.  
That works.

Expand|Select|Wrap|Line Numbers
  1.     var img_buttnz = document.getElementsByTagName('IMG');
  2.     for (var z = 0; z<img_buttnz.length; z++) {
  3.         if(img_buttnz[z].id) {
  4.             addEvent(img_buttnz[z], 'click', function() { k.changeFile(this); });
  5.         }
  6.     }
  7.  
That doesn't.

Can anyone tell me why I have to alert() the Objects in order to work with them?
Oct 22 '08 #1
Share this Question
Share on Google+
20 Replies


iam_clint
Expert 100+
P: 1,208
This little test code I slapped together worked fine with and without the alert

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <body>
  3. <script>
  4. function test() {
  5.     var img_buttnz = document.getElementsByTagName('IMG'); 
  6.     for (var z = 0; z<img_buttnz.length; z++) { 
  7.         if (img_buttnz[z].id!="") { 
  8.             img_buttnz[z].onclick=function() { alert(this.id); }
  9.         } 
  10.     } 
  11. }
  12. window.onload=function() { test(); }
  13. </script>
  14. <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">
  15. </body>
  16. </html>
  17.  
Oct 22 '08 #2

P: 13
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.
Oct 22 '08 #3

gits
Expert Mod 5K+
P: 5,235
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
Oct 22 '08 #4

P: 13
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:
Expand|Select|Wrap|Line Numbers
  1. function addEvent(elm, evType, fn, useCapture) {
  2.     elm["on"+evType]=fn;return;
  3. }
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.
Oct 22 '08 #5

gits
Expert Mod 5K+
P: 5,235
so i assume you want to do something like the following:

[HTML]<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 != "") {
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
Oct 22 '08 #6

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

[HTML]
for (var z = 0; z < img_buttnz.length; 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_buttnz[z]);" text is doing there after the closed curly brace?
Oct 22 '08 #7

gits
Expert Mod 5K+
P: 5,235
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 :)
Oct 22 '08 #8

P: 13
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.
Expand|Select|Wrap|Line Numbers
  1.     var panels = document.getElementsByClassName('panel');
  2.     for(var z = 0; z < panels.length; z++) {
  3.         // alert(panels[z].id);
  4.         var buttnz = panels[z].getElementsByTagName('IMG');
  5.         for(var q = 0; q < buttnz.length; q++) {
  6.             var f = function(el) { 
  7.                 addEvent(el, 'click', function() { k.changeFile(this); }) ;
  8.             }(buttnz[q]);
  9.         } 
  10.     } 
  11.  
Oct 22 '08 #9

gits
Expert Mod 5K+
P: 5,235
?? ... i tested it with FF ... it should work. do you get an alert when using:

Expand|Select|Wrap|Line Numbers
  1. addEvent(el, 'click', function() { alert('foo'); }) ;
for the above line 7.?
Oct 22 '08 #10

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

Expand|Select|Wrap|Line Numbers
  1. addEvent(el, 'click', function() { alert('foo'); }) ;
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.
Oct 22 '08 #11

gits
Expert Mod 5K+
P: 5,235
may be that would be a good idea ... lets have a look at this then.

kind regards
Oct 22 '08 #12

P: 13
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:
Expand|Select|Wrap|Line Numbers
  1. function launchKiosk() {
  2.     k.getImages();
  3.     var demo_container = document.getElementById('demo_container');
  4.     var divs = demo_container.childNodes;
  5.     for (var x = 0; x<divs.length; x++) {
  6.         if(divs[x].tagName == 'DIV') {
  7.             if (divs[x].getAttribute('id') == 'designs_button') {
  8.                 k.designs_button = divs[x];
  9.                 k.designs_panel = document.getElementById('designs');
  10.             }
  11.             if (divs[x].getAttribute('id') =='styles_button') {
  12.                 k.styles_button = divs[x];
  13.                 k.styles_panel = document.getElementById('styles');
  14.             }
  15.         }
  16.     }
  17.     if(k.designs_button && k.designs_button) {
  18.         addEvent(k.designs_button, 'click', function() {k.changeTab(k.designs_button)});
  19.         addEvent(k.styles_button, 'click', function() {k.changeTab(k.styles_button)});
  20.     }
  21.     var panels = document.getElementsByClassName('panel');
  22.     for(var z = 0; z < panels.length; z++) {
  23.         // alert(panels[z].id);
  24.         var buttnz = panels[z].getElementsByTagName('IMG');
  25.         for(var q = 0; q < buttnz.length; q++) {
  26.             var f = function(el) { 
  27.                 addEvent(el, 'click', function() { k.changeFile(this); }) ;
  28.             }(buttnz[q]);
  29.         } 
  30.     } 
  31. }
Oct 23 '08 #13

gits
Expert Mod 5K+
P: 5,235
just to ensure it first - you have a correct working getElementsByClassName()-method implemented for FF and/or since this method is just natively supported with FF 3 - you test with this version?
Oct 23 '08 #14

gits
Expert Mod 5K+
P: 5,235
the following example works as expected in FF3:

[HTML]<html>
<body>
<script>
function test() {
var panel = document.getElementsByClassName('panel')[0];
var img_buttnz = panel.getElementsByTagName('IMG');

for (var z = 0; z<img_buttnz.length; 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?
Oct 23 '08 #15

P: 13
Here is the getElementsByClassName function:
Expand|Select|Wrap|Line Numbers
  1. // getElementsByClassName
  2. document.getElementsByClassName = function(clsName){
  3.     var retVal = new Array();
  4.     var elements = document.getElementsByTagName("*");
  5.     for(var i = 0;i < elements.length;i++){
  6.         if(elements[i].className.indexOf(" ") >= 0){
  7.             var classes = elements[i].className.split(" ");
  8.             for(var j = 0;j < classes.length;j++){
  9.                 if(classes[j] == clsName)
  10.                     retVal.push(elements[i]);
  11.             }
  12.         }
  13.         else if(elements[i].className == clsName)
  14.             retVal.push(elements[i]);
  15.     }
  16.     return retVal;
  17. }
Thanks again. But let me ask you: forgetting the actual code for the moment, what changes about an object when it's alert()'ed that might make the situation different after having done so? Maybe this is the question we need to answer to get the problem solved?
Oct 23 '08 #16

P: 13
Wait, wait, wait. . .

Maybe the problem is that I'm using a getElementsByClassName function that was created outside of Mozilla's support? Could it be that if I change the function name, it might work? Hmm. . .
Oct 23 '08 #17

P: 13
Wait, wait, wait. . .

Maybe the problem is that I'm using a getElementsByClassName function that was created outside of Mozilla's support? Could it be that if I change the function name, it might work? Hmm. . .
The answer seems to be a big, fat "no." Which makes sense, since it really has nothing to do with the getElementsByClassName function. Dangit.
Oct 23 '08 #18

gits
Expert Mod 5K+
P: 5,235
nope ... i just asked because sometimes people use a getElementsByClassName() method thinking it is a standard-dom method and wonder why it just don't work without having one implemented. i tried your version with FF and the above example and even with your implementation it worked.

basicly an alert() just stops the execution of the code until the ok is clicked - so it is a modal message ... having code that works with an alert typically has a timing problem ... but i cannot see such problem here. currently i have to admit to be out of ideas ... i have to have a closer look at the problem. i wonder whether there is something that is besides the current code we just had a look at that could cause a problem ... since the example i gave you just use the same methods as you use in your code ... and it just works.

kind regards
Oct 23 '08 #19

P: 13
nope ...
Well, Gits, you've done a whole lot more than most would have, so I appreciate the effort.

One last thing, since you mention timing: the images I'm gathering up are actually being dynamically rendered from XML in the following line:
Expand|Select|Wrap|Line Numbers
  1.     k.getImages();
  2.  
Is it possible that the problem is that the code is happening before the XmlHttpRequest has gone through? If so, what do I do to arrest code execution until that's done?
Oct 23 '08 #20

gits
Expert Mod 5K+
P: 5,235
that could be truely the reason ... you could start the addEvent()-loop in the ready-callback of your AJAX-request after the nodes are full rendered into the DOM ... that should solve this issue ...

kind regards
Oct 23 '08 #21

Post your reply

Sign in to post your reply or Sign up for a free account.