Why my forloop that's not working

Hi, i have problem on my forloop.why is that it will not alert when i click the picture.

here is my code.

Code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style type="text/css"> .rembull ul{ list-style: none; } ul img{ width: 100px; } .bodycontainer{ background: #555555; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="bodycontainer"> <div class="rembull"> <ul id="pic"> <li><img src="image/pic-1.jpg"/></li> <li><img src="image/pic-2.jpg"/></li> <li><img src="image/pic-3.jpg"/></li> <li><img src="image/pic-4.jpg"/></li> </ul> <div> </div> <script> var pic = document.getElementById("pic"); var i=0; function loopIMG(){ for(i;i<pic.lenght;i++) { alert("yout click this"); } } pic.addEventListener("click",loopIMG,false); </script> </body> </html>

Quote:

Originally Posted by jemz

Hi, i have problem on my forloop.why is that it will not alert when i click the picture.

Start by using the error console.

Well for starters the line "pic.lenght" is incorrect. Length is spelled wrong. :)

Quote:

Originally Posted by jemz

Hi, i have problem on my forloop.why is that it will not alert when i click the picture

There are a couple of small issues with your code, they should become easy to identify if, as Ali suggested, you use the error console (it's totally worth spending some time learning how to use it :)).

As Blitz mentioned, the "pic.lenght" was misspelled, so that is an obvious one to fix.

The other issue is that in your code you get a reference to the "pic" element and try to loop over it, however what happens is that "pic" only contains one element because getElementById() will only ever return a single element.

So, to fix your code what you need to do is get a reference to pic (like you already have), but then you'll want a reference to the list elements below that. You can do this by calling getElementsByTagName("li") on the "pic". e.g.
Code JavaScript:

var pic, items; pic = document.getElementById("pic"); items = pic.getElementsByTagName("li"); console.log(items);// will show you the contents of items in your error console
One other thing I'd like to point out which I think will be important moving forward from here, is that if you loop over a list of DOM elements it is important to cache the length property.

So when you start your loop you would do something like this:
Code JavaScript:

var i, itemsLen; itemsLen = items.length; for ( i = 0; i < itemsLen; i+=1) { //do stuff }

Quote:
Originally Posted by AussieJohn
There are a couple of small issues with your code, they should become easy to identify if, as Ali suggested, you use the error console (it's totally worth spending some time learning how to use it :)).

As Blitz mentioned, the "pic.lenght" was misspelled, so that is an obvious one to fix.

The other issue is that in your code you get a reference to the "pic" element and try to loop over it, however what happens is that "pic" only contains one element because getElementById() will only ever return a single element.

So, to fix your code what you need to do is get a reference to pic (like you already have), but then you'll want a reference to the list elements below that. You can do this by calling getElementsByTagName("li") on the "pic". e.g.
Code JavaScript:

var pic, items; pic = document.getElementById("pic"); items = pic.getElementsByTagName("li"); console.log(items);// will show you the contents of items in your error console
One other thing I'd like to point out which I think will be important moving forward from here, is that if you loop over a list of DOM elements it is important to cache the length property.

So when you start your loop you would do something like this:
Code JavaScript:

var i, itemsLen; itemsLen = items.length; for ( i = 0; i < itemsLen; i+=1) { //do stuff }
Hi, Thank you for the reply...okay i will try this one and i will write back to you as soon as possible.

Hi AussieJohn, I forgot to ask to you...is it possible to alert the name of the picture every time i click so that i will know what picture that i click.Thank you in advance.

Quote:

Originally Posted by jemz

Hi AussieJohn, I forgot to ask to you...is it possible to alert the name of the picture every time i click so that i will know what picture that i click.Thank you in advance.

Yeah, thats pretty trivial to do. You just need to see what the element was that was clicked and then write some conditional code to work it out.

e.g. for a simple use case you might set the click handler on the entire "pic" list and filter by tagname to make sure you only execute code when someone clicks directly on an image. You'll need to cross-browser proof it, but it should work in most places.
Code JavaScript:

var pic = document.getElementById("pic"); pic.addEventListener("click", function(e){ if (e.target.tagName === "IMG") { console.log(e.srcElement.src); } });

Quote:
Originally Posted by AussieJohn
Yeah, thats pretty trivial to do. You just need to see what the element was that was clicked and then write some conditional code to work it out.

e.g. for a simple use case you might set the click handler on the entire "pic" list and filter by tagname to make sure you only execute code when someone clicks directly on an image. You'll need to cross-browser proof it, but it should work in most places.
Code JavaScript:

var pic = document.getElementById("pic"); pic.addEventListener("click", function(e){ if (e.target.tagName === "IMG") { console.log(e.srcElement.src); } });
Hi,thank you for this..okay i will try this one...I tried the forloop but it will not alert when i am going to click.

Code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style type="text/css"> .rembull ul{ list-style: none; } ul img{ width: 100px; } .bodycontainer{ /*background: #555555;*/ width: 100%; height: 100%; position: absolute; border: 1px solid blue; top: 0; left: 0; } #pic{ } #zoomout{ position: relative; left: 300px; bottom: 300px; width: 250px; height: 250px; border: 1px solid red; } </style> </head> <body> <div class="bodycontainer"> <div class="rembull"> <ul id="pic"> <li><img src="image/pic-1.jpg"/></li> <li><img src="image/pic-2.jpg"/></li> <li><img src="image/pic-3.jpg"/></li> <li><img src="image/pic-4.jpg"/></li> </ul> <div> </div> <div id="zoomout"> </div> <script> var pic, items; pic = document.getElementById("pic"); items = pic.getElementsByTagName("li"); console.log(items); console.log(document.getElementById("pic")); var i; var itemslen; itemslen = pic.length; function loopIMG(){ for(i=0;i < itemslen;i+=1) { itemslen[i].onclick=showThis; } } function showThis(){ alert("clickme"); } pic.addEventListener("click",loopIMG,false); </script> </body> </html>

I change the forloop to htis

Quote:

function loopIMG(){
for(i;i< items.length;i++)
{
items[i].onclick=showThis;
}

}

It's working now it will alert

Quote:
Originally Posted by AussieJohn
Yeah, thats pretty trivial to do. You just need to see what the element was that was clicked and then write some conditional code to work it out.

e.g. for a simple use case you might set the click handler on the entire "pic" list and filter by tagname to make sure you only execute code when someone clicks directly on an image. You'll need to cross-browser proof it, but it should work in most places.
Code JavaScript:

var pic = document.getElementById("pic"); pic.addEventListener("click", function(e){ if (e.target.tagName === "IMG") { console.log(e.srcElement.src); } });
I tried this,but it gives me on this error

Quote:

TypeError: e is undefined

Quote:

var pic = document.getElementById("pic");

pic.addEventListener("click", function(e){
if (e.target.tagName === "IMG") {
console.log(e.srcElement.src);
}
});

That's weird. Is that happening in an old browser? (Do you have a sample page up somewhere for me to look at if it's still happening? If you don't, maybe put an example up on http://jsfiddle.net/)

Also, I realized that srcElement is not something that's present in all browsers, so target would be a better property to use to find the src on.

i.e.

change this line:

Code:

console.log(e.srcElement.src);

To this:

Code:

console.log(e.target.src);

Quote:

Originally Posted by AussieJohn

That's weird. Is that happening in an old browser? (Do you have a sample page up somewhere for me to look at if it's still happening? If you don't, maybe put an example up on http://jsfiddle.net/)

Also, I realized that srcElement is not something that's present in all browsers, so target would be a better property to use to find the src on.

i.e.

change this line:

Code:

console.log(e.srcElement.src);

To this:

Code:

console.log(e.target.src);

I don't know how to use this.

Quote:

http://jsfiddle.net

here is my code.

Code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style type="text/css"> .rembull ul{ list-style: none; } ul img{ width: 100px; } .bodycontainer{ /*background: #555555;*/ width: 100%; height: 100%; position: absolute; border: 1px solid blue; top: 0; left: 0; } #pic{ } #zoomout{ position: relative; left: 300px; bottom: 300px; width: 250px; height: 250px; border: 1px solid red; } </style> </head> <body> <div class="bodycontainer"> <div class="rembull"> <ul id="pic"> <li><img src="image/pic-1.jpg"/></li> <li><img src="image/pic-2.jpg"/></li> <li><img src="image/pic-3.jpg"/></li> <li><img src="image/pic-4.jpg"/></li> </ul> <div> </div> <div id="zoomout"> </div> <script> var pic, items; pic = document.getElementById("pic"); items = pic.getElementsByTagName("li"); console.log(items); console.log(document.getElementById("pic")); var i=0; var itemslen, e; itemslen = pic.length; function loopIMG(){ for(i;i < items.length;i++) { items[i].onclick=showThis(e); } } function showThis(e){ if(e.target.tagName === "IMG") alert(e.target.src); } pic.addEventListener("click",loopIMG,false); </script> </body> </html>

Quote:

Originally Posted by AussieJohn

That's weird. Is that happening in an old browser? (Do you have a sample page up somewhere for me to look at if it's still happening? If you don't, maybe put an example up on http://jsfiddle.net/)

Also, I realized that srcElement is not something that's present in all browsers, so target would be a better property to use to find the src on.

i.e.

change this line:

Code:

console.log(e.srcElement.src);

To this:

Code:

console.log(e.target.src);

It's working now...thank you so much.

Code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style type="text/css"> .rembull ul{ list-style: none; } ul img{ width: 100px; } .bodycontainer{ /*background: #555555;*/ width: 100%; height: 100%; position: absolute; border: 1px solid blue; top: 0; left: 0; } #pic{ } #zoomout{ position: relative; left: 300px; bottom: 300px; width: 250px; height: 250px; border: 1px solid red; } </style> </head> <body> <div class="bodycontainer"> <div class="rembull"> <ul id="pic"> <li><img src="image/pic-1.jpg"/></li> <li><img src="image/pic-2.jpg"/></li> <li><img src="image/pic-3.jpg"/></li> <li><img src="image/pic-4.jpg"/></li> </ul> <div> </div> <div id="zoomout"> </div> <script> var pic, items; pic = document.getElementById("pic"); items = pic.getElementsByTagName("li"); console.log(items); console.log(document.getElementById("pic")); var i=0; var itemslen; itemslen = pic.length; pic.addEventListener("click",function(e){ if(e.target.tagName === "IMG") alert(e.target.src); }); </script> </body> </html>