pictureDesc[0] = "This is all the new puppies together. They are so cute! I just want to hold them all.";
pictureDesc[1] = "A friend held Susie up so that you can get a good look at her face. She looks just like her mom.";
pictureDesc[2] = "This is Princess, she is the same color as her brother Wicket. She loves to just give kisses to everyone who holds her.";
pictureDesc[3] = "Wicket is a very social puppy. He's not even afraid of Carlos who is my brother's dog.";
pictureDesc[4] = "Finally, here is Wicket and George. I like how they are starting to play together. They will be running around the yard in no time";
for (var puppyPics = 0; puppyPics < 5; puppyPics++) {
I need to loop through the puppyPics, pictureDesc, and pictureDate arrays while creating table rows that display (in each row), a puppy picture, picture description, and then picture date. Then I have to generate a caption saying how many photos there are now using appropriate array info to get the number. Can anyone help me finishing this script?
12-12-2012, 02:20 PM
iBeZi
Code:
function picDisplay ()
{
var puppyPics = [
{
"picture":"AllTheKids.jpg",
"description":"This is all the new puppies together. They are so cute! I just want to hold them all.",
"date":"March 10, 2012"
},
{
"picture":"susie.jpg",
"description":"A friend held Susie up so that you can get a good look at her face. She looks just like her mom.",
"date":"March 10, 2012"
},
{
"picture":"princess.jpg",
"description":"This is Princess, she is the same color as her brother Wicket. She loves to just give kisses to everyone who holds her.",
"date":"March 10, 2012"
},
{
"picture":"wicketAndCarlos.jpg",
"description":"Wicket is a very social puppy. He's not even afraid of Carlos who is my brother's dog.",
"date":"March 15, 2012"
},
{
"picture":"wicketAndGeorge.jpg",
"description":"Finally, here is Wicket and George. I like how they are starting to play together. They will be running around the yard in no time",
"date":"March 15, 2012"
}
];
var table = document.getElementById('table');
for (var i = 0; i < puppyPics.length; i++) {
table.innerHTML += "<tr><td><img src='"+puppyPics[i].picture+"'/></td><td>"+puppyPics[i].description+"</td><td>"+puppyPics[i].date+"</td></tr>";
}
}
picDisplay();
You can find out how many pictures there are with "puppyPics.length"