How to make Next Button work and go to another image using JavaScript

I am having trouble making my next button work. On clicking the next button , I need the images to change to the next one. There are three images. I am not sure if I have my javascript code in the wrong place or the location of the images do not work. here is my code below:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html>

<html>

<head>

<title>Lab 5, Part 2</title>

<meta charset = "utf-8" />

<script type = "text/javascript">

var curPic = 0;

var cPic = [

    'http://weblab.kennesaw.edu/seeds/lettuce.gif',

    'http://weblab.kennesaw.edu/seeds/tomato.gif',

    'http://weblab.kennesaw.edu/seeds/carrot.gif'

];
 
function vegeTables(direction) {

    if (direction == 'next') {

        curPic++;
 
        if (curPic == 3) {

            curPic = 0;

        }

    } else {

        curPic--;

    }
 
    document.images[0].src = cPic[curPic];

}

</script>
 
<style type = "text/css" >

  .vegetable1  {position: absolute; top: 120px; left: 39%;

               z-index: 0;}

  .vegetable2  {position: absolute; top: 120px; left: 39%;

               z-index: 0;}

  .vegetable3  {position: absolute; top: 120px; left: 39%;

               z-index: 0;}

  div.bottom    { height:20px;

    width:100%;

    margin: auto;

    position: absolute;

    top: 550px;

    left: 47%;}

  #veggie1 , #veggie2 , #veggie3 {display: inline-block;}

</style>

</head>

<body>

  <p>

   <img class = "vegetable1"  id = "veggie1"

        src = "/seeds/lettuce.gif"

        alt = "picture of vegetable1" />

   <img class = "vegetable2"  id = "veggie2"

        src = "/seeds/tomato.gif"

        alt = "picture of vegetable2" />

   <img class = "vegetable3"  id = "veggie3"

        src = "/seeds/carrot.gif"

        alt = "picture of vegetable3" />

</p>
 
 <div class = "bottom">

  <input id = "clickme" type = "button" value = "Next"  onclick = "vegeTables('next');" />

</div>
 
</body>

</html>

Mar 18 '16 #1

Subscribe Post Reply

3423

gits

5,390

Expert Mod 4TB

basically it is working - but you should have a look at the 3 img tags in your document's body. remove the 2nd and 3rd and then you see the img that you change. you set the src of that one img only - so the other 2 simply do overlay that.

Mar 24 '16 #2

jmrker

Alternative to your code to allow movement forward/backward. (Uncomment for Prev button)
Logic for curPic changed a bit for more pictures (if desired).

Expand|Select|Wrap|Line Numbers

     <!DOCTYPE html>

    <html>

    <head>

    <title>Lab 5, Part 2</title>

    <meta charset = "utf-8" />
 
    <script type = "text/javascript">

    var curPic = 0;

    var cPic = [

        'http://weblab.kennesaw.edu/seeds/lettuce.gif',

        'http://weblab.kennesaw.edu/seeds/tomato.gif',

        'http://weblab.kennesaw.edu/seeds/carrot.gif'

    ];

    function vegeTables(direction) {

        if (direction == 'next') { curPic++; } else { curPic--; }

        if (curPic < 0) { curPic = 2; }

        if (curPic > cPic.length-1) { curPic = 0; }

        document.images[0].src = cPic[curPic];

    }

    </script>
 
    <style type = "text/css" >

      .vegetable1  { position: absolute; top: 120px; left: 39%; z-index: 0;}

      div.bottom    { height:20px; width:100%;  margin: auto; 

                      position: absolute; top: 550px; left: 47%;} 

/*      #veggie1 , #veggie2 , #veggie3 { display: inline-block;} */

    </style>

    </head>

    <body>

     <p>

      <img class = "vegetable1"  id = "veggie1" src = "http://weblab.kennesaw.edu/seeds/lettuce.gif" />

     </p>

     <div class = "bottom">

      <input id = "clickmeN" type = "button" value = "Next"  onclick = "vegeTables('next');" />

<!--      <input id = "clickmeP" type = "button" value = "Prev"  onclick = "vegeTables('prev');" /> -->

     </div>

    </body>

    </html>

Apr 4 '16 #3

by: Bidarkota | last post by:

Can i access serverside selectbox using javascript in another page. if it is possible please help me with sample code. thanks in advance

ASP.NET

How do I make a button open an image in access?

by: dannyf | last post by:

I have an access database that I need to open scanned jpegs from. I don't care if it opens "in" access or if it just invokes the native application for that file type. I need the button to look at...

Microsoft Access / VBA

Saving web page as an image using javascript?

by: marshal | last post by:

Hi, I want to save web page as an image by using javascript (or may be in java). i.e. I want to save the image which is generated by the 'Print Screen button' of keyboard for web page. How...

Javascript

how to make flash button work in.net

by: anuparvathy | last post by:

hi To make a flash button work in asp.net do u need to write any code in the load event of the page?or is it just enough to write the code in the flash action script window? note: i do not...

.NET Framework

Loading only the image using javascript function

by: hegdepras | last post by:

Hi, I need to load only the image in a JSP without refreshing the entire page. I have an action class which sends the stream of the image and I call this action class from 'src' of <img> tag in...

Javascript

Moving image using javascript

by: Ranjit Kumar | last post by:

Hi guys i want to move image in my website using javascript.How i can do it.

PHP

i want to make the dropdown list uneditable by using javascript on button click

by: manishamca | last post by:

i want to make the chociebox uneditable that is the option selected shuld not change after we click a button... plz help me. Thanx in advance

Javascript

problem with rotate image using javascript

by: swethak | last post by:

Hi, I displayed the image taken from database.How to raotate that image using javascript.plz tell that how to start the logic.plz tell that some reference websites.

Javascript

Problem changing button type in IE using Javascript

by: mike_solomon | last post by:

I have a button <input type="submit" name="Delete" value="Delete"> This code can not be changed I want to use Javascript to change the type I tried:

Javascript

dynamic addition and manipulation of image using javascript

by: pdeb1234 | last post by:

i am trying to dynamically load the image of a bullet and then manipulate it using a looping function( with setTimeout() and clearTimeout() methods). here's the code>>>> <html> <head> <script...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

How to make Next Button work and go to another image using JavaScript

Similar topics