We're a community of 1077K IT Pros here for help, advice, solutions, professional growth and fun. Join us!
1,076,240 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Start New Discussion Reply to this Discussion
Ad: Cisco SmartPlay—UCS C-Series Servers
9 Months Ago
0

Javascript button not working

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>
2
Contributors
1
Reply
3 Hours
Discussion Span
9 Months Ago
Last Updated
2
Views
SolidSora
Light Poster
41 posts since Nov 2010
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0
9 Months Ago
0

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>

Helianthus
Junior Poster in Training
64 posts since Jul 2012
Reputation Points: 12
Solved Threads: 2
Skill Endorsements: 0

This article has been dead for over three months: Start a new discussion instead

Post: Markdown Syntax: Formatting Help
 
You
Web Development > JavaScript / DHTML / AJAX
View similar articles that have also been tagged:
 
© 2013 DaniWeb® LLC
Page rendered in 0.0741 seconds using 2.84MB