473,383 Members | 1,829 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,383 software developers and data experts.

I Have to alert() the Object?

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
20 1532
iam_clint
1,208 Expert 1GB
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
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
5,390 Expert Mod 4TB
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
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
5,390 Expert Mod 4TB
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
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
5,390 Expert Mod 4TB
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
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
5,390 Expert Mod 4TB
?? ... 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
?? ... 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
5,390 Expert Mod 4TB
may be that would be a good idea ... lets have a look at this then.

kind regards
Oct 22 '08 #12
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
5,390 Expert Mod 4TB
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
5,390 Expert Mod 4TB
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
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
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
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
5,390 Expert Mod 4TB
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
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
5,390 Expert Mod 4TB
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

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

Similar topics

9
by: Justin Koivisto | last post by:
Is there a way to create an alert-like message box that uses a custom image? Basically, I want to replace the default ! image with something else. -- Justin Koivisto - spam@koivi.com PHP...
15
by: optimistx | last post by:
How to write a function f(x) or f('x') so that it produces the same output as a call to alert-function: var x='abc'; alert('x='+x); In testing one needs to write similar alert() calls...
2
by: schieco | last post by:
The following code always prints the debug lines inside the conditional if statement before and after the alert statement when the session has timed out, but the alert and redirect only appear/work...
4
by: hugo2 | last post by:
Most of these characters are not on the standard keyboard. Here's a successful contrivance, with comments & cautions, a little page that works in IE6. <HTML><HEAD><SCRIPT TYPE="text/javascript">...
11
by: Alistair Saldanha | last post by:
I'm looking for the event that is fired by Internet Explorer to an "alert": <SCRIPT> Alert("You already have a session open") </SCRIPT> The event would be webBrowser.Document.???? Much...
4
by: clentoc | last post by:
I'm pretty new to javascript so this may well be a really basic error, but I've spent hours trying to fix it with no joy. I have written some code which looks in a CSV file, filters it depending...
1
by: pantagruel | last post by:
Hi, the following works in FF but not IE: Object.prototype.describe=function(){alert("Description: " + this);return this} alert.describe(); The question I have is mainly how can one go about...
2
by: axapta | last post by:
Hi Guys, I'm using this code in my asp.net page. It runs from a button webcontrol. Dim sbJScript As String sbJScript = "<script language = ""javascript"">" sbJScript = sbJScript &...
24
by: Jeremy J Starcher | last post by:
While reading c.l.j, I've noticed that some people prefer and indeed even recommend the use of "window.alert()" over "alert()". I can't find any technical reason to make this distinction, and...
20
by: Peter | last post by:
I need a popup alert after a post back. 1) user clicks on the submit button 2) Server side code runs and if the result is false I want to display a java script alert("It did not work") How to...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.