Question

I am using javascript to cycle through an array of urls within an iframe and so far when the prev or next buttons are pressed it jumps to the first var in the array and both prev and next functions end. Any ideas?

<iframe id="myFrame" src="http://startpage.com" width="484px" height = "424px"></iframe>
<button onclick = "prevPage(); ">Prev</button>
<button onclick = "nextPage(); ">Next</button>

<script>

var sites=new Array(); 
sites[0]="http://site1.html";       
sites[1]="http://site2.html";
sites[2]="http://site3.html";
sites[3]="http://site4.html";

function nextPage() {
var number = document.getElementById("myFrame").src;
number = number.substring(number.length - 4 ,number.length-3);
number = parseInt(number) + 1; 
document.getElementById("myFrame").src=sites[0];
} 

function prevPage() {
var number = document.getElementById("myFrame").src;
number = number.substring(number.length - 3 ,number.length-4);
number = parseInt(number) - 1; 
document.getElementById("myFrame").src=sites[0];
} 

</script>

Answer 1

Why are you using the URL as your ‘position’ storage? It’d be FAR easier to just use a variable:

var curPos = 0;

function nextPage() {
   curPos++;
   if (curPos >= sites.length) {
      curPos = 0;
   }
   document.getElementById('myframe').src = sites[curPos];
}

function prevPage() {
    curPos--;
    if (curPos < 0) {
       curPos = sites.length - 1;
    }
    document.getElementById('myframe'.).src = sites[curPos];
}