Why my forloop that's not working

**jemz** · Oct 19, 2012 12:26

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>

**Logic Ali** · Oct 19, 2012 13:39

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.

**blitz7751** · Oct 19, 2012 13:44

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

**AussieJohn** · Oct 20, 2012 06:48

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
}

**jemz** · Oct 20, 2012 07:27

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.

**jemz** · Oct 20, 2012 07:53

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.

**AussieJohn** · Oct 20, 2012 08:02

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);
    }
});

**jemz** · Oct 20, 2012 09:18

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>

**jemz** · Oct 20, 2012 13:21

I change the forloop to htis

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

}

It's working now it will alert

**jemz** · Oct 21, 2012 01:17

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

TypeError: e is undefined

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

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

**AussieJohn** · Oct 21, 2012 01:55

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);

**jemz** · Oct 21, 2012 07:54

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.

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>

**jemz** · Oct 21, 2012 08:18

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>

User Tag List

Thread: Why my forloop that's not working

Thread Tools

Display

Why my forloop that's not working

Bookmarks

Bookmarks

Posting Permissions