matching the current date to dates in an array

[andre73]

At certain specified dates I want to change the background image of a div.

So I figure I create two arrays of like this:

var pubDate=new Array();
var pubDate[0]="20080303";
var pubDate[1]="20080304";
var pubDate[2]="20080305";
var pubDate[3]="20080306";
var pubDate[4]="20080307";

var imgsrc=new Array();
var imgsrc[0]="horse.jpg";
var imgsrc[1]="rabbit.jpg";
var imgsrc[2]="snail.jpg";
var imgsrc[3]="cow.jpg";
var imgsrc[4]="gnu.jpg";

now I want to match the current date with the dates in the array and if todays date matches any of the dates in the array I would like to display the corresponding image. Thus, if the date is 20080303 I want the background image of the div (let say div id is "varioDiv")to be horse.jpg.

so I guess it will be something like this
(if pubDate is equal to todays date)

{then set the background image of the varioDiv to the corresponding array item in the imgsrc array}

I am uncertain if I need 2 arrays for this or if there is a way of storing it all in one array?

Is there anyone who can help me get this down to functioning javascript? Any help is surely appreciated.

[Fotiman]

var bgs = { 
  '20080303': {imgsrc: 'horse.jpg' }, 
  '20080304': {imgsrc: 'rabbit.jpg'}, 
  '20080305': {imgsrc: 'snail.jpg'} 
}; 
// get imgsrc for a specific date 
var thedate= '20080304'; 
alert(bgs[thedate].imgsrc); 
// loop through customers 
for (var prop in bgs) { 
  if (prop == thedate) { 
    // Set the background here 
    alert(bgs[prop].imgsrc); 
    break; 
  } 
} 

[andre73]

Thanks a lot for your help. However, since I'm keen on learning more about javascript can you (or someone else) please explain to me what is going on in this code, alternatively, supply a link to a page which explains the concept/method used. Also, is it possible to modify this code to have it change the source of a server side include. Like this:
from
<div id="holder">
<!--#include file="file1.htm"-->
</div>
to
<div id="holder">
<!--#include file="file2.htm"-->
</div>

[Fotiman]

can you (or someone else) please explain to me what is going on in this code

Sure.
First, I got rid of the arrays. Instead I created a single object (bgs):

var bgs = {}; 

Next, I created a bunch of properties in the object. The property names are the date values that you want to match against, and the values stored by those properties is another object which contains a single property "imgsrc", which contains the value for your background image. I probably could have eliminated this object and just had the background value instead, like this:

var bgs = {  
 '20080303': 'horse.jpg',  
 '20080304': 'rabbit.jpg',  
 '20080305': 'snail.jpg'  
};  

The important part is the 'for' loop. What this does is loop through all the properties of the object. The value of prop will be the string that matches the property name, and if we use array notation, we can get the value stored in that property:

// loop through customers  
for (var prop in bgs) {  
 // Compare the property against your current date 
 // string to see if this is the one we want 
 if (prop == thedate) {  
  // Set the background here  
  alert(bgs[prop]);  
  break;  
 }  
}  

Also, is it possible to modify this code to have it change the source of a server side include

No. A server side include will be processed server side. All JavaScript will be processed client side, after it gets the response from the server.

[andre73]

OK thanks a lot!