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>