Simple 0 to 13 loop?

This site is best viewed in a modern browser with JavaScript enabled.

kerensa

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 and cover. Is this possible? And if so, how would I go about articulating it?

JMRKER

I don't have your image list, so I used my own [11.jpg, 22.jpg, ... 55.jpg]
Modify to use your own...


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

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 = new Image

and then later

image.src = "images/cover.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

Actually, kerensa, you're pretty darn close.

var images = [];

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

kerensa

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:

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

kerensa;1173115 wrote:
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 = new Image

and then later

image.src = "images/cover.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. :rolleyes:

kerensa

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

Jeff_Mott

kerensa;1173192 wrote:
<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.

Jeff_Mott

kerensa;1173192 wrote:
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

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

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

*Jeff