www.webdeveloper.com
Results 1 to 9 of 9

Thread: Why is this function not working?

  1. #1
    Join Date
    Jan 2005
    Location
    uk
    Posts
    18

    Question Why is this function not working?

    Hi,

    Im having trouble implementing a function to display the first set of a series of images whithin my photo gallery.

    the function is:

    function firstlargeimage()

    {
    if (currentimage = 1){
    document.images[5].src = images[currentimage]
    document.images.FirstLarge.value = "FirstLarge"}
    }

    I know the current image should be set to = 0 as that is the first image in my "images" array. however when i do this it doesnt display the first image. When i set "current image = 1" in the above function it displays the second image and works fine.

    Does any one know why this isnt working properly, its really getting on my nerves and preventing me from completing my assignment!

    Many thanks Ben,

    Below is my full script:

    <script language="Javascript">

    var currentthumb = 0
    thumbnails = new Array ()
    thumbnails[0] ="images/1small.jpg"
    thumbnails[1] ="images/2small.jpg"
    thumbnails[2] ="images/3small.jpg"
    thumbnails[3] ="images/4small.jpg"
    thumbnails[4] ="images/5small.jpg"
    thumbnails[5] ="images/6small.jpg"
    thumbnails[6] ="images/7small.jpg"
    thumbnails[7] ="images/8small.jpg"
    thumbnails[8] ="images/9small.jpg"
    thumbnails[9] ="images/10small.jpg"
    thumbnails[10] ="images/11small.jpg"
    thumbnails[11] ="images/12small.jpg"
    thumbnails[12] ="images/13small.jpg"
    thumbnails[13] ="images/14small.jpg"
    thumbnails[14] ="images/15small.jpg"
    thumbnails[15] ="images/16small.jpg"
    thumbnails[16] ="images/17small.jpg"
    thumbnails[17] ="images/18small.jpg"
    thumbnails[18] ="images/19small.jpg"
    thumbnails[19] ="images/20small.jpg"

    var currentimage
    images = new Array ()
    images[0] ="images/1large.jpg"
    images[1] ="images/2large.jpg"
    images[2] ="images/3large.jpg"
    images[3] ="images/4large.jpg"
    images[4] ="images/5large.jpg"
    images[5] ="images/6large.jpg"
    images[6] ="images/7large.jpg"
    images[7] ="images/8large.jpg"
    images[8] ="images/9large.jpg"
    images[9] ="images/10large.jpg"
    images[10] ="images/11large.jpg"
    images[11] ="images/12large.jpg"
    images[12] ="images/13large.jpg"
    images[13] ="images/14large.jpg"
    images[14] ="images/15large.jpg"
    images[15] ="images/16large.jpg"
    images[16] ="images/17large.jpg"
    images[17] ="images/18large.jpg"
    images[18] ="images/19large.jpg"
    images[19] ="images/20large.jpg"

    function nextthumb(){

    if (currentthumb <=10){
    currentthumb += 5
    document.images[0].src = thumbnails[currentthumb]
    document.images[1].src = thumbnails[currentthumb +1]
    document.images[2].src = thumbnails[currentthumb +2]
    document.images[3].src = thumbnails[currentthumb +3]
    document.images[4].src = thumbnails[currentthumb +4]
    document.images.next.value = "Next"}
    }

    function previousthumb(){

    if (currentthumb >= 5){
    currentthumb -= 5
    document.images[0].src = thumbnails[currentthumb]
    document.images[1].src = thumbnails[currentthumb +1]
    document.images[2].src = thumbnails[currentthumb +2]
    document.images[3].src = thumbnails[currentthumb +3]
    document.images[4].src = thumbnails[currentthumb +4]
    document.images.previous.value = "Previous"}
    }

    function changeDisplay(imageNo)

    {

    index = currentthumb + imageNo

    document.images[5].src = images[index]
    }

    function nextlargeimage()

    {

    if (currentimage <=18){
    currentimage += 1
    document.images[5].src = images[currentimage]
    document.images.NextLarge.value = "NextLarge"}
    }

    function previouslargeimage()

    {

    if (currentimage >=1){
    currentimage -= 1
    document.images[5].src = images[currentimage]
    document.images.PreviousLarge.value = "PreviousLarge"}
    }

    function lastlargeimage()

    {
    if (currentimage = 19){
    document.images[5].src = images[currentimage]
    document.images.LastLarge.value = "LastLarge"}
    }

    function firstlargeimage()

    {
    if (currentimage = 1){
    document.images[5].src = images[currentimage]
    document.images.FirstLarge.value = "FirstLarge"}
    }

    </script>


    <table width="950" border="0">
    <tr>
    <td width="49">
    <div align="center">
    <input type=button value="Previous" name="Previous" onClick="previousthumb();">
    </div>
    </td>
    <td width="152">
    <div align="center"><img src="../images/1small.jpg" name="img" border=1 onclick = changeDisplay(0)></div>
    </td>
    <td width="152">
    <div align="center"><img src="../images/2small.jpg" name="img" border=1 onclick = changeDisplay(1)></div>
    </td>
    <td width="152">
    <div align="center"><img src="../images/3small.jpg" name="img" border=1 onclick = changeDisplay(2)></div>
    </td>
    <td width="152">
    <div align="center"><img src="../images/4small.jpg" name="img" border=1 onclick = changeDisplay(3)></div>
    </td>
    <td width="152">
    <div align="center"><img src="../images/5small.jpg" name="img" border=1 onclick = changeDisplay(4)></div>
    </td>
    <td width="65">
    <div align="center">
    <input type=button value="Next" name="Next" onClick="nextthumb();">
    </div>
    </td>
    </tr>
    </table>
    <table width="950" border="0">
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>

    <table width="950" border="0">
    <tr>
    <td width="18" rowspan="2">
    <div align="center"></div></td>
    <td colspan="4"><img src="../images/1large.jpg" width="300" height="400"></td>
    <td width="632" height="101">&nbsp;</td>
    </tr>
    <tr>
    <td width="75"> <div align="center">
    <input name="FirstLarge" type=button id="FirstLarge" onClick= "firstlargeimage();" value="First">
    </div></td>
    <td width="75"> <div align="center">
    <input type=button value="Previous" name="PreviousLarge" onClick="previouslargeimage();">
    </div></td>
    <td width="75"> <div align="center">
    <input type=button value="Next" name="NextLarge" onClick="nextlargeimage();">
    </div></td>
    <td width="75"> <div align="center">
    <input name="LastLarge" type=button id="LastLarge" onClick= "lastlargeimage();" value="Last">
    </div></td>
    <td width="632" height="49">&nbsp;</td>
    </tr>
    </table>
    </div>

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Check whether your image is your first image of the document indeed... Maybe you have a banner, or a bullet. something...

  3. #3
    Join Date
    Jan 2005
    Location
    uk
    Posts
    18
    The image im trying to change is the 5th image in the document. I have functions that sucessfully change it to next, previous and last images in my array. However when i implement my function to set it to the 1st image in my array images[0] as shown below:

    function firstlargeimage()

    {
    if (currentimage = 0){
    document.images[5].src = images[currentimage]
    document.images.FirstLarge.value = "FirstLarge"}
    }

    The function doesnt appear to work as the image doesnt change to the first image in the array. If i change the function so that:

    if(currentimage = 1)

    then it works but display the 2nd image in my array(images[1]0. I cant understand why its not working for the first image??????????

  4. #4
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    = is the assignment operator. == is comparative.

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    1. var currentimage is not defined
    2. comparative operator is ==, not =

  6. #6
    Join Date
    Jan 2005
    Location
    uk
    Posts
    18
    i thought it was definde? where isnt it defined? should it be definde here:

    var currentimage
    images = new Array ()

    In the brackets?

    Sorry i am fairly new to javascript! Im just trying to fulfill my first assignment on javascript. Im not sure wqhat you mean about the comparison operators? whay does == need to be used instead of = ? I am very appriciative for your help,

    Cheers, Ben.

  7. #7
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    Any if statement condition should have ==, rather than =. = just assigns a value, it cannot compare values.

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    hm... much too deprecated code... I need some time to bring it to a much up-to-date stade... maybe tommorow, if time, sorry

  9. #9
    Join Date
    Jan 2005
    Location
    uk
    Posts
    18
    Sorry for being a pain guys :-( Iv written all my code from scrath, iv tried my best but it is my first assignment.

    My aim was to create a javascript and html webpage which allows the user to browse a collection of images and their associated information to be viewed.

    The requirments were:

    1. show 5 thumbnail images.
    2. show 1 large image
    3. show info associated with large image being shown
    4. provide a button to allow the user to select next 5 thumbnails
    5. provide a button to allow the user to select previous 5 thumbnails
    6. provide a button to show next large image in array
    7. provide a button to show previous large image in array
    8. Provide a button to allow user to show first large image in array
    9. Provide a button to allow user to show last large image in array
    10. provide a text box allowing user to enter number of large image to be shown.
    11. allow thumbnails clicked to change large image being shown.

    I am having problems with requirments 10, 8 and 3.

    below is my code so far,

    ANY help would be much appriciated!

    Cheers Ben.

    <html>
    <head>
    <script language="Javascript">

    var currentthumb = 0
    thumbnails = new Array ()
    thumbnails[0] ="images/1small.jpg"
    thumbnails[1] ="images/2small.jpg"
    thumbnails[2] ="images/3small.jpg"
    thumbnails[3] ="images/4small.jpg"
    thumbnails[4] ="images/5small.jpg"
    thumbnails[5] ="images/6small.jpg"
    thumbnails[6] ="images/7small.jpg"
    thumbnails[7] ="images/8small.jpg"
    thumbnails[8] ="images/9small.jpg"
    thumbnails[9] ="images/10small.jpg"
    thumbnails[10] ="images/11small.jpg"
    thumbnails[11] ="images/12small.jpg"
    thumbnails[12] ="images/13small.jpg"
    thumbnails[13] ="images/14small.jpg"
    thumbnails[14] ="images/15small.jpg"
    thumbnails[15] ="images/16small.jpg"
    thumbnails[16] ="images/17small.jpg"
    thumbnails[17] ="images/18small.jpg"
    thumbnails[18] ="images/19small.jpg"
    thumbnails[19] ="images/20small.jpg"

    var currentimage
    images = new Array ()
    images[0] ="images/1large.jpg"
    images[1] ="images/2large.jpg"
    images[2] ="images/3large.jpg"
    images[3] ="images/4large.jpg"
    images[4] ="images/5large.jpg"
    images[5] ="images/6large.jpg"
    images[6] ="images/7large.jpg"
    images[7] ="images/8large.jpg"
    images[8] ="images/9large.jpg"
    images[9] ="images/10large.jpg"
    images[10] ="images/11large.jpg"
    images[11] ="images/12large.jpg"
    images[12] ="images/13large.jpg"
    images[13] ="images/14large.jpg"
    images[14] ="images/15large.jpg"
    images[15] ="images/16large.jpg"
    images[16] ="images/17large.jpg"
    images[17] ="images/18large.jpg"
    images[18] ="images/19large.jpg"
    images[19] ="images/20large.jpg"

    function nextthumb(){

    if (currentthumb <=10){
    currentthumb += 5
    document.images[0].src = thumbnails[currentthumb]
    document.images[1].src = thumbnails[currentthumb +1]
    document.images[2].src = thumbnails[currentthumb +2]
    document.images[3].src = thumbnails[currentthumb +3]
    document.images[4].src = thumbnails[currentthumb +4]
    document.images.next.value = "Next"}
    }

    function previousthumb(){

    if (currentthumb >= 5){
    currentthumb -= 5
    document.images[0].src = thumbnails[currentthumb]
    document.images[1].src = thumbnails[currentthumb +1]
    document.images[2].src = thumbnails[currentthumb +2]
    document.images[3].src = thumbnails[currentthumb +3]
    document.images[4].src = thumbnails[currentthumb +4]
    document.images.previous.value = "Previous"}
    }

    function changeDisplay(imageNo)

    {

    index = currentthumb + imageNo

    document.images[5].src = images[index]
    }

    function nextlargeimage()

    {

    if (currentimage <=18){
    currentimage += 1
    document.images[5].src = images[currentimage]
    document.images.NextLarge.value = "NextLarge"}
    }

    function previouslargeimage()

    {

    if (currentimage >=1){
    currentimage -= 1
    document.images[5].src = images[currentimage]
    document.images.PreviousLarge.value = "PreviousLarge"}
    }

    function lastlargeimage()

    {
    if (currentimage = 19){
    document.images[5].src = images[currentimage]
    document.images.LastLarge.value = "LastLarge"}
    }

    function firstlargeimage()

    {
    if (currentimage = 1){
    document.images[5].src = images[currentimage]
    document.images.FirstLarge.value = "FirstLarge"}
    }

    </script>


    <table width="950" border="0">
    <tr>
    <td width="49">
    <div align="center">
    <input type=button value="Previous" name="Previous" onClick="previousthumb();">
    </div>
    </td>
    <td width="152">
    <div align="center"><img src="../images/1small.jpg" name="img" border=1 onclick = changeDisplay(0)></div>
    </td>
    <td width="152">
    <div align="center"><img src="../images/2small.jpg" name="img" border=1 onclick = changeDisplay(1)></div>
    </td>
    <td width="152">
    <div align="center"><img src="../images/3small.jpg" name="img" border=1 onclick = changeDisplay(2)></div>
    </td>
    <td width="152">
    <div align="center"><img src="../images/4small.jpg" name="img" border=1 onclick = changeDisplay(3)></div>
    </td>
    <td width="152">
    <div align="center"><img src="../images/5small.jpg" name="img" border=1 onclick = changeDisplay(4)></div>
    </td>
    <td width="65">
    <div align="center">
    <input type=button value="Next" name="Next" onClick="nextthumb();">
    </div>
    </td>
    </tr>
    </table>
    <table width="950" border="0">
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>

    <table width="950" border="0">
    <tr>
    <td width="18" rowspan="2">
    <div align="center"></div></td>
    <td colspan="4"><img src="../images/1large.jpg" width="300" height="400"></td>
    <td width="632" height="101">&nbsp;</td>
    </tr>
    <tr>
    <td width="75"> <div align="center">
    <input name="FirstLarge" type=button id="FirstLarge" onClick= "firstlargeimage();" value="First">
    </div></td>
    <td width="75"> <div align="center">
    <input type=button value="Previous" name="PreviousLarge" onClick="previouslargeimage();">
    </div></td>
    <td width="75"> <div align="center">
    <input type=button value="Next" name="NextLarge" onClick="nextlargeimage();">
    </div></td>
    <td width="75"> <div align="center">
    <input name="LastLarge" type=button id="LastLarge" onClick= "lastlargeimage();" value="Last">
    </div></td>
    <td width="632" height="49">&nbsp;</td>
    </tr>
    </table>
    </div>

    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles