SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    How to display specific number of image in a javascript loop

    Hi,

    This code work well in PHP but it's not applying to javascript. How can I get it worked?
    Code:
    default_image = document.getElementById(default_image');
    for(i = 1; i <= 5; i++){
    	default_img = "images/default_image.png";
    	default_image.src = default_img;
    }
    The HTML:
    Code:
    <img id='default_image' src='' />

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,615
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    You're missing a single quote mark, and all new variables should be preceded by the "var" declaration.

    Code:
    var default_image = document.getElementById('default_image');
    for(var i = 1; i <= 5; i++){
        var default_img_src = "images/default_image.png";
        default_image.src = default_img_src;
    }
    I'm not sure that I understand what your for-loop is supposed to be doing. It doesn't seem necessary. Can you explain what you're trying to accomplish with it?

    Also, the naming of your variables is a little ambiguous. It would be easy to confuse default_img and default_image.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Your codes only show one image.

    What I'm trying to do is inserting 5 default image (same image) into a placeholder div, if there's no image yet to display, or when my user have yet to upload their images.

    The placeholder will display 5 images. It work great with PHP. But I want this done with javascript instead.

    I'm looking for methods that get it done. Hope I explain clearly.

    Thanks

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The code ytou currently have is telling the browser to download the images but is inserting them all one after the other as the same single image in the web page instead of adding them to the page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The code ytou currently have is telling the browser to download the images but is inserting them all one after the other as the same single image in the web page instead of adding them to the page.
    Yes, that's what I'm trying to do, but its' not working as expected.

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Each time you iterate through the loop you need to create a new <img> element, see the following demo:

    http://jsfiddle.net/chrisupjohn/5Z2QA/

  7. #7
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Work like a charm, thanks.


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
  •