Simple 0 to 13 loop?

**kerensa** · 09-20-2011 07:59 PM

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?

**JMRKER** · 09-20-2011 08:57 PM

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>

**kerensa** · 09-20-2011 10:41 PM

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. ):

**Jeff Mott** · 09-21-2011 12:54 AM

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

**kerensa** · 09-21-2011 09:01 AM

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?

**JMRKER** · 09-21-2011 09:04 AM

Originally Posted by kerensa

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.

**kerensa** · 09-21-2011 11:20 AM

Ah--no, that was my fault for not explaining! I'm sorry. So there's no way to do this?

**Jeff Mott** · 09-21-2011 12:19 PM

Originally Posted by kerensa

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>

**Jeff Mott** · 09-21-2011 12:21 PM

Originally Posted by kerensa

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.

**kerensa** · 09-21-2011 03:20 PM

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.

**kerensa** · 09-21-2011 03:21 PM

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

*Jeff

Thread: Simple 0 to 13 loop?

Thread Tools

Display

Simple 0 to 13 loop?

Something to try...

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions