Javascript button not working

Question

SolidSora 0 Light Poster

12 Years Ago

I've got a photo gallery button on my website. I've got one button that looks like a forward arrow, which works fine and a back arrow, which does nothing. Also clicking on the thumbnail to view a larger one works fine. Everything is fine except for the back arrow.

Here is some code below:

function prevPic(){
    imgNum = imgNum - 1;
    if(imgNum<=1){
        imgNum = 1;
        groupNum = groupNum - 1;
    }
    switch(imgNum){
        case 1:
            document.getElementById("full").src="images/tanks1.jpeg";
            document.getElementById("bar1").src="images/bar.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 2:
            document.getElementById("full").src="images/tanks1.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 3:
            document.getElementById("full").src="images/tanks2.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 4:
            document.getElementById("full").src="images/house1.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 5:
            document.getElementById("full").src="images/house2.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 6:
            document.getElementById("full").src="images/platform1.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
    }
}

And my entire javascript code if that might help:

<script type="text/javascript">

var imgNum = 0;
var groupNum = 1;

function showFullSize(imgNum){
    switch(imgNum){
        case 1:
            document.getElementById("full").src="images/tanks1.jpeg";
            document.getElementById("bar1").src="images/bar.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
            imgNum = 1;
        break;
        case 2:
            document.getElementById("full").src="images/tanks2.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
            imgNum = 2;     
        break;
        case 3:
            document.getElementById("full").src="images/house1.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
            imgNum = 3;
        break;
        case 4:
            document.getElementById("full").src="images/house2.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
            imgNum = 4;
        break;
        case 5:
            document.getElementById("full").src="images/platform1.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
            imgNum = 5;
        break;  
        case 6:
            document.getElementById("full").src="images/platform2.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar.jpg";
            imgNum = 6;
        break;  
    }
}

function nextPic(){ 
    imgNum = imgNum + 1;
    if(imgNum>=6){
        imgNum = 0;
        groupNum = groupNum + 1;
    }
    switch(imgNum){
        case 1:
            document.getElementById("full").src="images/tanks2.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 2:
            document.getElementById("full").src="images/house1.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 3:
            document.getElementById("full").src="images/house2.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 4:
            document.getElementById("full").src="images/platform1.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 5:
            document.getElementById("full").src="images/platform2.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar.jpg";
        break;
    }
}

function prevPic(){
    imgNum = imgNum - 1;
    if(imgNum<=1){
        imgNum = 1;
        groupNum = groupNum - 1;
    }
    switch(imgNum){
        case 1:
            document.getElementById("full").src="images/tanks1.jpeg";
            document.getElementById("bar1").src="images/bar.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 2:
            document.getElementById("full").src="images/tanks1.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 3:
            document.getElementById("full").src="images/tanks2.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 4:
            document.getElementById("full").src="images/house1.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 5:
            document.getElementById("full").src="images/house2.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
        case 6:
            document.getElementById("full").src="images/platform1.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        break;
    }
}

</script>

And here is where I call the functions in my page:

<img src="images/leftarrow.png" onlick="prevPic()"/><img id="full" width="640" height="480" src="images/tanks1.jpeg"/><img src="images/rightarrow.png" onclick="nextPic()"/></center>

javascript

2 Contributors
1 Reply
159 Views
3 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by Helianthus

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Helianthus 12 Junior Poster in Training · Answer 1 · 2012-07-31T21:56:08+00:00

You have a typo for your prevPic(). You are missing the c in onclick.

<img src="images/leftarrow.png" onlick="prevPic()"/><img id="full" width="640" height="480" src="images/tanks1.jpeg"/><img src="images/rightarrow.png" onclick="nextPic()"/></center>