Hello, I am trying to understand DOM scripting and javascript.
short version:
The problem is, fillGallery() doesn't work as I'd like.
With
var thisArtwork = choice.getAttribute("id");
the variable thisArtwork doesn't become the array of that attribute, it simply becomes the name of that attribute. For example, I have:
var artwork2 = ['Dreaming','12in x 12in x 12in x 17.5in','Alabaster',','Dreaming.jpg','3']
I'd like for thisArtwork to become the array artwork2. But using the JS above, it simple becomes the text "artwork2".
I understand why it happens that way, but I wonder how I get around it.
How do I pass an array to another variable via this process?
How do I say, "this variable becomes the array of this name"?
Extended descriptive version:
I have a photo gallery page that draws data from a PHP/mySQL connection. Onload, I put all the data into javascript arrays:
<script type="text/javascript" language="text/javascript">
//this will write out arrays for all the artwork variables, using data from the PHP database lookup
<?php
for ($i=0;$i<$count;$i++){
$row[$i]=mysql_fetch_array($results);
$PieceID[$i]=$row[$i][0];
//$Type[$i]=$row[$i][1]
$Title[$i]=$row[$i][2];
//$Dimensions[$i]=$row[$i][3];
$Material[$i]=$row[$i][4];
$DateMade[$i]=$row[$i][5];
if ($DateMade[$i]!=""){$DateMade[$i]=', '.$DateMade[$i];} // this adds comma to front of date
//$Edition[$i]=$row[$i][6];
//$Price[$i]=$row[$i][7];
//$Available[$i]=$row[$i][8];
$Other[$i]=$row[$i][9];
$PicLocation[$i]=$row[$i][10];
$Dimensions[$i]=explode('|',$row[$i][3]);
$Dims[$i]=$Dimensions[$i][0];
for ($t=1;$t<count($Dimensions[$i]);$t++){
$Dims[$i].=' x '.$Dimensions[$i][$t]; // this creates dimension text: l x w x h or l x w or simply l
}
$Dim[$i]=$row[$i][3]; // this variable for javascript parsing later on
$PicL[$i]=explode('|',$row[$i][10]);
$PicLoc[$i]=$PicL[$i][0];
$PicNum[$i]=count($PicL[$i]);
// artwork1,artwork2, etc. .. . array has six variables, so artwork1[5] is $PicNum[$i]
echo "var artwork$i = ['$Title[$i]','$Dims[$i]','$Material[$i]','$DateMade[$i]','$PicLoc[$i]','$PicNum[$i]']\r\n";
}
?>
</script>
I then have a list of titles along the side of the page, written like this:
for ($i=0;$i<$count;$i++){
echo "<li><a href=\"artwork$i\" id=\"artwork$i\" title=\"$Title[$i]\" onclick=\"fillGallery(this); return false;\">$Title[$i]</a></li>\r\n";
}
And when a user clicks on one of those buttons, the idea is to pass the associated array to a new variable that then populates the gallery framework (divs and spans) using the fillGallery() function:
<script type="text/javascript" language="text/javascript">
// this needs to populate all the areas with the proper info and images
// in theory, we simply declare variables equal to thisArtwork[1] thisArtwork[2] etc
function fillGallery(choice) {
//pull out data
var thisArtwork = choice.getAttribute("id");
var artTitle = thisArtwork[0];
var artDimensions = thisArtwork[1];
var artMaterial = thisArtwork[2];
var artDate = thisArtwork[3];
var artLocation = thisArtwork[4];
var artCount = thisArtwork[5];
//locate the parts of the page that will be changed
var title = document.getElementById("title");
var datemade = document.getElementById("datemade");
var material = document.getElementById("material");
var dimensions = document.getElementById("dimensions");
var more = document.getElementById("more");
/change the data in those parts
title.firstChild.nodeValue = artTitle;
datemade.firstChild.nodeValue = artDate;
material.firstChild.nodeValue = artMaterial;
dimensions.firstChild.nodeValue = artDimensions;
/
//error check stuff
document.writeln('artwork4= '+artwork4);
document.writeln('artwork4[1]= '+artwork4[1]);
document.writeln('artwork= '+thisArtwork);
document.writeln('title= '+artTitle);
document.writeln('dimensions= '+artDimensions);
document.writeln('material= '+artMaterial);
document.writeln('date= '+artDate);
document.writeln('location= '+artLocation);
document.writeln('count= '+artCount);
}
</script>
The problem is, fillGallery() doesn't work as I'd like.
With
var thisArtwork = choice.getAttribute("id");
the variable thisArtwork doesn't become the array of that attribute, it simply becomes the name of that attribute. For example, I have:
var artwork2 = ['Dreaming','12in x 12in x 12in x 17.5in','Alabaster',','Dreaming.jpg','3']
I'd like for thisArtwork to become the array artwork2. But using the JS above, it simple becomes the text "artwork2".
I understand why it happens that way, but I wonder how I get around it.
How do I pass an array to another variable via this process?
How do I say, "this variable becomes the array of this name"?
I hope that makes sense. And thanks in advance.