www.webdeveloper.com
Results 1 to 11 of 11

Thread: Simple 0 to 13 loop?

  1. #1
    Join Date
    Mar 2009
    Posts
    9

    Red face Simple 0 to 13 loop?

    Hi there, friends!

    I have a rather simple question. It's been four long years since I last dealt with JS and although I remember the basic concepts behind loops I don't remember how to actually implement them.

    This is my current code:

    if (document.images) {
    image0 = new Image
    image1 = new Image
    image2 = new Image
    image3 = new Image
    image4 = new Image
    image5 = new Image
    image6 = new Image
    image7 = new Image
    image8 = new Image
    image9 = new Image
    image10 = new Image
    image11 = new Image
    image12 = new Image
    image13 = new Image

    image0.src = "images/cover.jpg"
    image1.src = "images/cover1.jpg"
    image2.src = "images/cover2.jpg"
    image3.src = "images/cover3.jpg"
    image4.src = "images/cover4.jpg"
    image5.src = "images/cover5.jpg"
    image6.src = "images/cover6.jpg"
    image7.src = "images/cover7.jpg"
    image8.src = "images/cover8.jpg"
    image9.src = "images/cover9.jpg"
    image10.src = "images/cover10.jpg"
    image11.src = "images/cover11.jpg"
    image12.src = "images/cover12.jpg"
    image13.src = "images/cover13.jpg"

    }

    What's bothering me is how redundant it is. I would much rather simplify it into a few lines where i increments by 1 from 0 to 13 in the case of image[i] and cover[i]. Is this possible? And if so, how would I go about articulating it?

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Lightbulb Something to try...

    I don't have your image list, so I used my own [11.jpg, 22.jpg, ... 55.jpg]
    Modify to use your own...
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Dynamic Image Loader </title>
    <script type="text/javascript">
    function addNewImg(newimageId){ 
    //object detection check 
      if (!document.getElementById &&!document.createElement) { return; } 
      newImg = document.createElement('img'); 
      newImg.id = "image"+newimageId; 
      newImg = document.getElementById("divimage1").appendChild(newImg); 
      var onC='alert("image'+newimageId+'")'; 
      document.getElementById("image"+newimageId).onclick=new Function(onC); 
    }
    window.onload = function() {
      var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
      for (var i=0; i<5; ++i) { addNewImg(i+1); }
      for (var i=0; i<5; ++i) {
        document.getElementById('image'+(i+1)).src = baseURL+(i+1)+''+(i+1)+'.jpg';
      }
    }
    </script>
    </head>
    <body>
    <div id="divimage1"></div>
    </body>
    </html>

  3. #3
    Join Date
    Mar 2009
    Posts
    9
    Ah...thank you, JMRKER. I was actually hoping for something quite simple, if it's even possible...something along the lines of:


    if (document.images) {
    var i=0; i<=13; i++;
    image[i] = new Image

    and then later

    image[i].src = "images/cover[i].jpg"

    Does that make sense? So reducing the repetitiveness of 14 lines into a single i=0, i<=13 loop. I just don't know if it's possible and if so, how to write it. ):

  4. #4
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Actually, kerensa, you're pretty darn close.

    Code:
    var images = [];
    
    for (var i = 0; i <= 13; i++) {
        images[i] = new Image();
        images[i].src = 'images/cover' + i + '.jpg';
    }
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  5. #5
    Join Date
    Mar 2009
    Posts
    9
    Yes!! Jeff, that's exactly what I meant--thank you!

    I'm unfortunately doing something else wrong now....I've replaced the code I posted above (in the first post) with this:

    if (document.images) {

    var images = [];

    for (var i = 0; i <= 13; i++) {
    image[i] = new Image();
    image[i].src = 'images/cover' + i + '.jpg';
    }

    }

    Just as a bit of background, this is for an onMouseover event. An example HTML snippet would be:

    <img src="images/cover.jpg" name="books" width="130" height="196" border="0" />

    <a href="#" onMouseover="document.books.src=image1.src" onMouseout="document.books.src=image0.src">blah blah blah</a>

    Where cover.jpg is image0.src. (Every time someone mouseovers the text link, the image named "books" changes.) It changed with my previous code, so it can't be too far off...right?

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Exclamation

    Quote Originally Posted by kerensa View Post
    Ah...thank you, JMRKER. I was actually hoping for something quite simple, if it's even possible...something along the lines of:


    if (document.images) {
    var i=0; i<=13; i++;
    image[i] = new Image

    and then later

    image[i].src = "images/cover[i].jpg"

    Does that make sense? So reducing the repetitiveness of 14 lines into a single i=0, i<=13 loop. I just don't know if it's possible and if so, how to write it. ):
    Sorry, my bad, I thought you actually wanted to SEE the images, not just manipulate them.

  7. #7
    Join Date
    Mar 2009
    Posts
    9
    Ah--no, that was my fault for not explaining! I'm sorry. So there's no way to do this?

  8. #8
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Quote Originally Posted by kerensa View Post
    <img src="images/cover.jpg" name="books" width="130" height="196" border="0" />

    <a href="#" onMouseover="document.books.src=image1.src" onMouseout="document.books.src=image0.src">blah blah blah</a>
    You just need to use the same array syntax that we used in the loop.

    <a href="#" onMouseover="document.books.src=images[1].src" onMouseout="document.books.src=images[0].src">blah blah blah</a>
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  9. #9
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Quote Originally Posted by kerensa View Post
    if (document.images) {

    var images = [];

    for (var i = 0; i <= 13; i++) {
    image[i] = new Image();
    image[i].src = 'images/cover' + i + '.jpg';
    }

    }
    Also, notice that we created an array called "images" (plural), but in the loop, you're using the name "image" (singular). Make sure you stay consistent, otherwise you won't be accessing the same variables.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  10. #10
    Join Date
    Mar 2009
    Posts
    9
    Jef...gosh, you really are stunning. It works beautifully and, just as (or even more) importantly, it works succinctly! Great catch on the var images slip-up--that would have driven me mad if a single 's' were the problem.

    Again, thank you so very much. Everything makes perfect sense now.

  11. #11
    Join Date
    Mar 2009
    Posts
    9

    Red face

    And yes, I did just spell your name with one 'f'.

    *Jeff

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles