Javascript Functions

I'm trying to execute a javascript function that requires a set number of values.  The values need to be pulled from a database using asp.

The function I'm using is basically a photo gallery.  It changes the image as well as various text fields located around the image using element ids.  I have 2 buttons on my site that I want to use to cycle through the images.

The link for the buttons are:
    <a href="#_self" onclick="MoveNext(0,x)"> and <a href="#_self" onclick="MoveNext(1,x)">
   
     x is suppose to be the number of the current picture

Here's the javascript code I have:

<script language="Javascript">
function MoveNext(Direct,curPic)
{
      if (Direct == 0){
            x = curPic - 1
      }
      if (Direct == 0){
            x = curPic + 1
      }
      // eventually i want to fill these arrays from a database
                pictureA = new Array("build.jpg","buy.jpg","rent.jpg")
      highschoolA = new Array("Kent Co.","Grand Traverse","Kalkaska")
      yearbuiltA = new Array("1999","2000","2006")
      archiA = new Array("Ranch","Duplex","Two Story")
      sqfeetA = new Array("1000","2000","3000")
      priceA = new Array("250,000","120,000","75,000")
      bathA = new Array("2","3","4")
      bedA = new Array("1","7","5")
      thelinkA = new Array("images/icons/build.jpg","images/icons/buy.jpg","images/icons/rent.jpg")
      
      function Gallery(pictureName,imageFile,highschool,yearbuilt,archi,sqfeet,price,bath,bed,thelink)
            {
                  if (document.all)
                  {
                        document.getElementById(pictureName).style.filter="blendTrans(duration=1)";
                        document.getElementById(pictureName).filters.blendTrans.Apply();
                  }
                        document.getElementById(pictureName).src = imageFile;
                  if (document.all)
                  {
                        document.getElementById(pictureName).filters.blendTrans.Play();
                  }
                        document.getElementById("school").innerHTML=highschool;
                        document.getElementById("yearbuilt").innerHTML=yearbuilt;
                        document.getElementById("archi").innerHTML=archi;
                        document.getElementById("sqfeet").innerHTML=sqfeet;
                        document.getElementById("price").innerHTML=price;
                        document.getElementById("bed").innerHTML=bed;
                        document.getElementById("bath").innerHTML=bath;
                        document.getElementById("thelink").innerHTML=thelink;
                  }
      
      Gallery('pictureName',imageFileA(x),highschoolA(x),yearbuiltA(x),archiA(x),sqfeetA(x),priceA(x),bathA(x),bedA(x),thelinkA(x))
Return(x);
}
</script>

I'm new to javascript, so I wrote the MoveNext function the way it made sense to me - which is obviosuly wrong.  No laughing please :)  - the Gallery function was written by someone else, and it works fine by itsself.

If anyone can point me in the right direction here, I'd appreciate it!
LVL 1
steverguyAsked:
Who is Participating?
 
Pravin AsarPrincipal Systems EngineerCommented:
Here is a complete example..
Please study it carefully. It defines a custom class to organize and retrieve data.
Has some error checks built-in.




<html>
<head>
<title>Picture Gallery</title>
</head>
<body>
<form>
<input type="button" onclick="Gallery ('picture1');" value="Show 1">
<input type="button" onclick="Gallery ('picture2');" value="Show 2">
<input type="button" onclick="Gallery ('picture3');" value="Show 3">
<br>
<input type="button" onclick="MoveNext(-1);" value="Prev">
<input type="button" onclick="MoveNext(1);" value="Next">
</form>

<img id="picture" width="100" src="../images/0.gif">
<br>
<br>School:<span id="school"></span>
<br>YearBuilt:<span id="yearbuilt"></span>
<br>Archi:<span id="archi"></span>
<br>SqFeet:<span id="sqfeet"></span>
<br>Price:<span id="price"></span>
<br>Bath:<span id="bath"></span>
<br>Bed:<span id="bed"></span>
<br>TheLink:<span id="thelink"></span>
<script language="Javascript">
function ImgData (p1,p2,p3,p4,p5,p6,p7,p8,p9,p10) {
      this.name       = p1;
      this.imagefile  = p2;
      this.highschool = p3;
      this.yearbuilt  = p4;
      this.archi      = p5;
      this.sqfeet     = p6;
      this.price      = p7;
      this.bath       = p8;
      this.bed        = p9;
    this.thelink    = p10;
    return this;
}
var curPic = 0;
var picData = new Array();
var curData = null;

function MoveNext (dir) {
   if (dir < 0) { curPic--; }
   else { curPic ++;}
   if (curPic < 0) { curPic  = picData.length-1; }
   else if ((curPic) >= picData.length) { curPic  = 0; }
   curData = picData[curPic];
   Gallery(curData.name);
}


function GetImgData (name) {
    for (ix=0; ix < picData.length; ix++){
        if (picData[ix].name.match(name)) {
                  return picData[ix];
            curPic = ix;
        }
    }
    return null;
}
function updateInnerHTML (id, str) {
      var tagObj = document.getElementById(id);
    if (tagObj) { tagObj.innerHTML = str; }
}
function Gallery(pictureName)
{
      var curData = GetImgData (pictureName);
      if (!curData) { return; }

      if (document.all)
      {
      document.getElementById("picture").style.filter="blendTrans(duration=1)";
      document.getElementById("picture").filters.blendTrans.Apply();
      }
      document.getElementById("picture").src = curData.imagefile;
      if (document.all)
      {
      document.getElementById("picture").filters.blendTrans.Play();
      }
      updateInnerHTML("school",curData.highschool);
      updateInnerHTML("yearbuilt",curData.yearbuilt);
      updateInnerHTML("archi",curData.archi);
      updateInnerHTML("sqfeet",curData.sqfeet);
      updateInnerHTML("price",curData.price);
      updateInnerHTML("bed",curData.bed);
      updateInnerHTML("bath",curData.bath);
      updateInnerHTML("thelink",curData.thelink);
      return true;
}
function BuildImgData() {
      var px=0;
    picData[px++]= new ImgData('picture1','../images/0.gif', 'Kent Co.', '1999', 'Ranch','1000', '250 000', '2', '1','images/icons/build.jpg');
    picData[px++] = new ImgData('picture2', '../images/1.gif', 'Grand Traverse', '2000', 'Duplex', '2000', '120 000', '3', '7', 'images/icons/buy.jpg');
      picData[px++] = new ImgData('picture3', '../images/2.gif', 'Kalkaska','2006', 'Two Story', '3000', '75 000', '4', '5', 'images/icons/rent.jpg');
}
BuildImgData();
</script>
</body>
</html>
0
 
PreeceCommented:
First thing that I see is that it appears as though you've defined a function within a function.  Functions should be defined separately:

<script language="JavaScript" type="text/javascript">
<!--
//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
function MoveNext(Direct,curPic)  {
  if (Direct == 0){
    x = curPic - 1
  }
  if (Direct == 0){
    x = curPic + 1
  }
  // eventually i want to fill these arrays from a database
  pictureA = new Array("build.jpg","buy.jpg","rent.jpg")
  highschoolA = new Array("Kent Co.","Grand Traverse","Kalkaska")
  yearbuiltA = new Array("1999","2000","2006")
  archiA = new Array("Ranch","Duplex","Two Story")
  sqfeetA = new Array("1000","2000","3000")
  priceA = new Array("250,000","120,000","75,000")
  bathA = new Array("2","3","4")
  bedA = new Array("1","7","5")
  thelinkA = new Array("images/icons/build.jpg","images/icons/buy.jpg","images/icons/rent.jpg")
 
  Gallery('pictureName',imageFileA(x),highschoolA(x),yearbuiltA(x),archiA(x),sqfeetA(x),priceA(x),bathA(x),bedA(x),thelinkA(x))
  Return(x);
}

//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
function Gallery(pictureName,imageFile,highschool,yearbuilt,archi,sqfeet,price,bath,bed,thelink)  {
  if (document.all)
  {
    document.getElementById(pictureName).style.filter="blendTrans(duration=1)";
    document.getElementById(pictureName).filters.blendTrans.Apply();
  }
  document.getElementById(pictureName).src = imageFile;
  if (document.all)
  {
    document.getElementById(pictureName).filters.blendTrans.Play();
  }
    document.getElementById("school").innerHTML=highschool;
    document.getElementById("yearbuilt").innerHTML=yearbuilt;
    document.getElementById("archi").innerHTML=archi;
    document.getElementById("sqfeet").innerHTML=sqfeet;
    document.getElementById("price").innerHTML=price;
    document.getElementById("bed").innerHTML=bed;
    document.getElementById("bath").innerHTML=bath;
    document.getElementById("thelink").innerHTML=thelink;
  }
}

//-->
</script>

Preece
0
 
steverguyAuthor Commented:
Thanks for your help.  I'll really have to look it over, as some of it is over my head.  But i feel much further now than I did when i ran into the problem yesterday.  Thanks for your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.