[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript Functions

Posted on 2006-05-23
3
Medium Priority
?
244 Views
Last Modified: 2008-02-26
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!
0
Comment
Question by:steverguy
3 Comments
 
LVL 12

Expert Comment

by:Preece
ID: 16746056
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
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 2000 total points
ID: 16746516
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
 
LVL 1

Author Comment

by:steverguy
ID: 16751346
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question