SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post 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>

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jemz View Post
    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.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well for starters the line "pic.lenght" is incorrect. Length is spelled wrong.

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jemz View Post
    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
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    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.

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jemz View Post
    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);
        }
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  8. #8
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    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>

  9. #9
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    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);
    }
    });

  11. #11
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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);
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  12. #12
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    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.

    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>

  13. #13
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •