problem with array statement

[squarkman]

Greetings:
Please see the script below.

This is a photo gallery with changing captions. The photos show and change fine until I added the myCaption Array so I could add captions. After adding the Array, the pictures won't show.

Any help would be greatly appreciated.
Thanks
Rocky
---------------------------------------------------------

// List text captions
var myCaption= new Array(24)
myCaption[00]= "apix001";
myCaption[01]= "apix002";
myCaption[02]= "apix003";
myCaption[03]= "apix004";
myCaption[04]= "apix005";
myCaption[05]= "apix006";
myCaption[06]= "apix007";
myCaption[07]= "apix008";
myCaption[08]= "apix009";
myCaption[09]= "apix010";
myCaption[10]= "apix011";
myCaption[11]= "apix012";
myCaption[12]= "apix013";
myCaption[13]= "apix014";
myCaption[14]= "apix015";
myCaption{15]= "apix016";
myCaption[16]= "apix017";
myCaption[17]= "apix018";
myCaption[18]= "apix019";
myCaption[19]= "apix020";
myCaption[20]= "apix021";
myCaption[21]= "apix022";
myCaption[22]= "apix023";
myCaption[23]= "apix024";
myCaption[24]= "apix025";



// List of image filenames without extension
var myImg= new Array(24)
myImg[00]= "pix001";
myImg[01]= "pix002";
myImg[02]= "pix003";
myImg[03]= "pix004";
myImg[04]= "pix005";
myImg[05]= "pix006";
myImg[06]= "pix007";
myImg[07]= "pix008";
myImg[08]= "pix009";
myImg[09]= "pix010";
myImg[10]= "pix011";
myImg[11]= "pix012";
myImg[12]= "pix013";
myImg[13]= "pix014";
myImg[14]= "pix015";
myImg[15]= "pix016";
myImg[16]= "pix017";
myImg[17]= "pix018";
myImg[18]= "pix019";
myImg[19]= "pix020";
myImg[20]= "pix021";
myImg[21]= "pix022";
myImg[22]= "pix023";
myImg[23]= "pix024";
myImg[24]= "pix025";



// Tell browser where to find the image
myImgSrc = "/dogdaysinla/";

// Tell browser the type of file
myImgEnd = ".jpg"

var i = 0;

// Create function to load image
function loadImg(){
document.imgSrc.src = myImgSrc + myImg + myImgEnd;
document.getElementById('caption') = myCaption;
}

// Create link function to switch image backward
function prev(){
if(i<1){
var l = i+=24
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
document.getElementById('caption') = myCaption[l];
}

// Create link function to switch image forward
function next(){
if(i>23){
var l = i-=24
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
document.getElementById('caption') = myCaption[l];
}

// Load function after page loads
window.onload=loadImg;

-------------------------------------

 

[kaht]

// Create function to load image
function loadImg(){
  document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
   [!]document.getElementById('caption') = myCaption[i][/!];
}

// Create link function to switch image backward
function prev(){
  if(i<1){
    var l = i+=24
  } else {
    var l = i-=1;
     }
  document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
  [!]document.getElementById('caption') = myCaption[l][/!];
}

// Create link function to switch image forward
function next(){
  if(i>23){
    var l = i-=24
  } else {
    var l = i+=1;
  }
  document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
  [!]document.getElementById('caption') = myCaption[l][/!];
}

The parts highlighted in red above are invalid. You are essentially saying "the caption div is now this string", when instead you want to be saying "the [!]value of the[/!] caption div is now this string".

Use the innerHTML property to set the content of a div:

document.getElementById("someDivId").innerHTML = "some string"

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[trollacious]

Your Javascript will probably barf on lines like these:

myCaption[08]= "apix009";
myCaption[09]= "apix010";

Any number in JS that begins with a zero is interpreted as octal, so any number that begins with a zero that has an 8 or 9 in it will cause problems.

Lee

 

[squarkman]

Thanks for the replies
Kaht: But what if I don't want to use a real text string but instead a variable that contains text?
Rocky

 

[squarkman]

Trollacious:
How would you sequence the array of 25 items numerically without starting with a 0? Can you go like this
1
2
3
4
5
6
7
8
9
10
11
and so on?
Does the fact that it goes from one digit to two mess up the array processing?
Rocky

 

[squarkman]

Thanks Kaht, but it still is not helping the problem. Could it be the array names beginning with zero that is the problem?
Rocky
----------------------------
// List image names without extension
var myImg= new Array(24)
myImg[00]= "pix001";
myImg[01]= "pix002";
myImg[02]= "pix003";
myImg[03]= "pix004";
myImg[04]= "pix005";
myImg[05]= "pix006";
myImg[06]= "pix007";
myImg[07]= "pix008";
myImg[08]= "pix009";
myImg[09]= "pix010";
myImg[10]= "pix011";
myImg[11]= "pix012";
myImg[12]= "pix013";
myImg[13]= "pix014";
myImg[14]= "pix015";
myImg[15]= "pix016";
myImg[16]= "pix017";
myImg[17]= "pix018";
myImg[18]= "pix019";
myImg[19]= "pix020";
myImg[20]= "pix021";
myImg[21]= "pix022";
myImg[22]= "pix023";
myImg[23]= "pix024";
myImg[24]= "pix025";

// List captions
var myCaption= new Array(24)
myCaption[00]= "apix001";
myCaption[01]= "apix002";
myCaption[02]= "apix003";
myCaption[03]= "apix004";
myCaption[04]= "apix005";
myCaption[05]= "apix006";
myCaption[06]= "apix007";
myCaption[07]= "apix008";
myCaption[08]= "apix009";
myCaption[09]= "apix010";
myCaption[10]= "apix011";
myCaption[11]= "apix012";
myCaption[12]= "apix013";
myCaption[13]= "apix014";
myCaption[14]= "apix015";
myCaption{15]= "apix016";
myCaption[16]= "apix017";
myCaption[17]= "apix018";
myCaption[18]= "apix019";
myCaption[19]= "apix020";
myCaption[20]= "apix021";
myCaption[21]= "apix022";
myCaption[22]= "apix023";
myCaption[23]= "apix024";
myCaption[24]= "apix025";

// Tell browser where to find the image
myImgSrc = "/dogdaysinla/";

// Tell browser the type of file
myImgEnd = ".jpg"

var i = 0;

// Create function to load image
function loadImg(){
document.imgSrc.src = myImgSrc + myImg + myImgEnd;
document.getElementById("caption").innerHTML = myCaption;
}

// Create link function to switch image backward
function prev(){
if(i<1){
var l = i+=24
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
document.getElementById("caption").innerHTML = myCaption[l];
}

// Create link function to switch image forward
function next(){
if(i>23){
var l = i-=24
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
document.getElementById("caption").innerHTML = myCaption[l];

// Load function after page loads
window.onload=loadImg;
--------------------------

 

[trollacious]

Use 1 - 25 just like you said. I actually would do it a lazier method

var myImg= new Array(), limit = 25;
var myCaption= new Array();
var count;

for (var mi=0; mi<limit; mi++)
  {
  count = mi + 1;
  if (count < 10)
    {
    count = '00' + count;
    }
  else if (count < 100)
    {
    count = '0' + count;
    }
  myImg[mi] = 'pix' + count;
  myCaption[mi] = 'apix' + count;
  }

Lee

 

[squarkman]

I have been getting some good info but not quite what I'm looking for. The caption has to be a text string like "Here's Brenda at the Dog Show strutting her stuff..."
Not just an incremented text string like pix002, pix 003...

I guess that means I'm back to filling out the array manually.

Not sure how to approach that.
Thanks for any further help.
Rocky



var myImg= new Array(), limit = 25;
var myCaption= new Array();
var count;
for (var mi=0; mi<limit; mi++)
{
count = mi + 1;
if (count < 10)
{
count = '00' + count;
}
else if (count < 100)
{
count = '0' + count;
}
myImg[mi] = 'pix' + count;
myCaption[mi] = 'apix' + count;
}
myImgSrc = "/dogdaysinla/";
myImgEnd = ".jpg"
var i = 0;
function loadImg(){
document.imgSrc.src = myImgSrc + myImg + myImgEnd;
document.getElementById('caption') = myCaption;
}
function prev(){
if(i<1){
var l = i+=24
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
document.getElementById('caption') = myCaption[l];
}
function next(){
if(i>23){
var l = i-=24
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
document.getElementById('caption') = myCaption[l];
}
window.onload=loadImg;

 

[squarkman]

Here's what I have so far. Images aren't working again.
Did I misunderstand something?
-----------------
var myImg= new Array(), limit = 25;
var count;
for (var mi=0; mi<limit; mi++)
{
count = mi + 1;
if (count < 10)
{
count = '00' + count;
}
else if (count < 100)
{
count = '0' + count;
}
myImg[mi] = 'pix' + count;
}


var myCaption= new Array(24)
myCaption[0]= "apix001";
myCaption[1]= "apix002";
myCaption[2]= "apix003";
myCaption[3]= "apix004";
myCaption[4]= "apix005";
myCaption[5]= "apix006";
myCaption[6]= "apix007";
myCaption[7]= "apix008";
myCaption[8]= "apix009";
myCaption[9]= "apix010";
myCaption[10]= "apix011";
myCaption[11]= "apix012";
myCaption[12]= "apix013";
myCaption[13]= "apix014";
myCaption[14]= "apix015";
myCaption{15]= "apix016";
myCaption[16]= "apix017";
myCaption[17]= "apix018";
myCaption[18]= "apix019";
myCaption[19]= "apix020";
myCaption[20]= "apix021";
myCaption[21]= "apix022";
myCaption[22]= "apix023";
myCaption[23]= "apix024";
myCaption[24]= "apix025";

myImgSrc = "/dogdaysinla/";
myImgEnd = ".jpg"
var i = 0;
function loadImg(){
document.imgSrc.src = myImgSrc + myImg + myImgEnd;
document.getElementById("caption").innerHTML = myCaption;
}
function prev(){
if(i<1){
var l = i+=24
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
document.getElementById("caption").innerHTML = myCaption[l];
}
function next(){
if(i>23){
var l = i-=24
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
document.getElementById("caption").innerHTML = myCaption[l];
}
window.onload=loadImg;
------------

 

[trollacious]

You provide fake information, you get fake help. You waste your time and ours both doing that.

Lee

 

[squarkman]

What do you mean fake information. I have been clear in all my postings.
Rocky

 

[tsuji]

[1] Your myCaption() has a length of 25, indexed 0 to 24. The declaration is this.
>var myCaption= new Array(24)
[tt]var myCaption= new Array([red]25[/red])[/tt]

[2] Your script is written too clumsy. That is no problem apriori. But the more relevant criticism is that it is not tightly related. myCaption and myImg _must_ have the same length which is only reflected as a hazard. You should make good use of limit variable (global scope).

[3] For your benefit, this is a quick rewrite of the whole thing.
[tt]
var limit=25;
var myImg=new Array(limit);

for (var mi=0; mi<myImg.length;mi++) {
var s='00'+(mi+1).toString();
myImg[mi]='pix'+s.substr(s.length-3,3);
}

var myCaption= new Array(limit);
for (var mi=0;mi<myCaption.length;mi++) {
myCaption[mi]='a'+myImg[mi];
}

myImgSrc = "/dogdaysinla/";
myImgEnd = ".jpg"
var i = 0;
function loadImg(){
document.imgSrc.src = myImgSrc + myImg + myImgEnd;
document.getElementById("caption").innerHTML = myCaption;
}
function prev(){
var l=(l+limit-1)%limit;
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
document.getElementById("caption").innerHTML = myCaption[l];
}
function next(){
var l=(l+1)%limit
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
document.getElementById("caption").innerHTML = myCaption[l];
}
window.onload=loadImg;
[/tt]

 

[tsuji]

Amendment
I failed to read well l and i. This is the correction to the two functions whre l appear which should be the global variable i.
[tt]
function prev(){
[red]//[/red]var l=(l+limit-1)%limit;
[blue]i=(i+limit-1)%limit;[/blue]
document.imgSrc.src = myImgSrc + myImg[[red]i[/red]] + myImgEnd;
document.getElementById("caption").innerHTML = myCaption[[red]i[/red]];
}
function next(){
[red]//[/red]var l=(l+1)%limit
[blue]i=(i+1)%limit;[/blue]
document.imgSrc.src = myImgSrc + myImg[[red]i[/red]] + myImgEnd;
document.getElementById("caption").innerHTML = myCaption[[red]i[/red]];
}
[/tt]

 

[trollacious]

I have been getting some good info but not quite what I'm looking for. The caption has to be a text string like "Here's Brenda at the Dog Show strutting her stuff..."
Not just an incremented text string like pix002, pix 003...

and

What do you mean fake information. I have been clear in all my postings.

My solution was for what turned out to be false code, not what you were REALLY using.

In real life, I use an array of objects that contain properties for the URL and the caption. I also do not hard code the array indexes (indices?), but use something like

var pi=0;
myCaption[pi++]= "apix001";
myCaption[pi++]= "apix002";
myCaption[pi++]= "apix003";
myCaption[pi++]= "apix004";
myCaption[pi++]= "apix005";
myCaption[pi++]= "apix006";
myCaption[pi++]= "apix007";
//etc.

so I can change the order of the array elements without having to rewrite a bunch of index numbers.

Lee

 

[BillyRayPreachersSon]

You also have a typo in your code:

myCaption[14]= "apix015";
  myCaption[!]{[/!]15]= "apix016";
  myCaption[16]= "apix017";

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[kaht]

The caption has to be a text string like "Here's Brenda at the Dog Show strutting her stuff..."

Just out of curiosity, where is that information coming from? You don't have any descriptive strings like that in the code of any of your posts...

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[scorpio66]

Out of interest, why not keep your image data and caption together in a single array?

var arImgData = [
    ['pix01', 'comment01']
  , ['pix02', 'comment02']
  , ['pix03', 'comment03']
...
]

// Tell browser where to find the image
var myImgSrc = "/dogdaysinla/";

// Tell browser the type of file
var myImgEnd = ".jpg"

var i = 0;
var numImgs = arImgData.length;

// Create function to load image
function loadImg(idx){
  if (typeof idx=='undefined') idx=0;

  document.imgSrc.src = myImgSrc + arImgData[idx][0] + myImgEnd;
   document.getElementById('caption') = arImgData[idx][1];
}

// Create link function to switch image backward
function prev(){
  i = (--i+numImgs)%numImgs;
  loadImg(i);
}

// Create link function to switch image forward
function next(){
  i = ++i%numImgs;
  loadImg(i);
}

// Load function after page loads
window.onload=loadImg;

I have not tested this code but it looks a bit cleaner than what you're doing.

Chaz

 

[scorpio66]

Sorry, cut and paste error.

Line in loadImg should read:

document.getElementById('caption').innerText = arImgData[idx][1];

 

[BillyRayPreachersSon]

What about the "{" typo I mentioned a few posts back?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[squarkman]

Here's the link to the actual (now working) site.
var myImg= new Array(), limit = 25;
var count;
for (var mi=0; mi<limit; mi++)
{
count = mi + 1;
if (count < 10)
{
count = '00' + count;
}
else if (count < 100)
{
count = '0' + count;
}
myImg[mi] = 'pix' + count;
}


// List captions
var myCaption= new Array(24)
myCaption[0]= "This boxer has a good gig! Bow Wow Ween event, Barrington Dog Park, Oct. 2006";
myCaption[1]= "apix001";
myCaption[2]= "apix002";
myCaption[3]= "apix003";
myCaption[4]= "apix004";
myCaption[5]= "Nutts for Mutts, New Leash on Life and K9's Only founder Bobby Dorafshar saves another dog from Ca. wildfires. Oct. 2007 photo credit: NewLeash on Life ";
myCaption[6]= "apix006";
myCaption[7]= "apix007";
myCaption[8]= "apix008";
myCaption[9]= "apix009";
myCaption[10]= "MTV's Rob (standing) and Big (seated left) from the hit TV show, Rob and Big demonstrate their loyalty to Dog Days at Big's dog Meaty's birthday party. Skybark event Oct. 2007";
myCaption[11]= "The opposite of a 'hot dog'? Skybark event. Sept. 2007";
myCaption[12]= "apix012";
myCaption[13]= "apix013";
myCaption[14]= "A couple of Misfits at (Walk for the Underdog) rescue event. Oct. 2006";
myCaption[15]= "apix015";
myCaption[16]= "apix016";
myCaption[17]= "apix017";
myCaption[18]= "A standard Schnauzer checks out the art at Bow Wow Meow. Sept. 2007";
myCaption[19]= "apix019";
myCaption[20]= "apix020";
myCaption[21]= "apix021";
myCaption[22]= "apix022";
myCaption[23]= "apix023";
myCaption[24]= "Actors Dick Van Patten and son James plug Dog Days. Skybark event. Oct. 2007";



myImgSrc = "/dogdaysinla/";
myImgEnd = ".jpg"
var i = 0;
function loadImg(){
document.imgSrc.src = myImgSrc + myImg + myImgEnd;
document.getElementById("caption").innerHTML = myCaption;
}
function prev(){
if(i<1){
var l = i+=24
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
document.getElementById("caption").innerHTML = myCaption[l];
}
function next(){
if(i>23){
var l = i-=24
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
document.getElementById("caption").innerHTML = myCaption[l];
}
window.onload=loadImg;
----------
Thanks again!

Thanks for all the suggestions. The code below is a mix of the orig and the suggestions and is the only version I have seen work yet.
------