Previous-Next Buttons for an iframe

I am trying to display testimonials on my website in an iframe. This way I can utilize the scrolling feature if needed and keep the page from changing sizes due to the length of the testimonial. I can also change the testimonials order and content easily.

I am trying to make a "next" and "previous" button that will sit on the main page (not in the iframe) and cycle through the testimonials. However I am having trouble with this as I am trying to use an array.

This is my current code for the Next button. The idea is to check to see if the testimonial is on the last document. If so display the first testimonial in the array. "Else" change to the next testimonial in the array.


var myTests=new Array();
myTests[0]="test001.html";
myTests[1]="test002.html";
myTests[2]="test003.html";
var numTests = myTests.length;
var curTests = 0

function nextTests()
{
if (curTest <= numTests)
document.getElementById("testFrame").src=myTests(1);
else
document.getElementById("testFrame").src=myTests[0];
}

Then I am using a simple button to call the function "onclick"

<button type="button" onclick="nextTests()">next</button>


PS I am a beginner at this so I apologize if I am making silly mistakes. However, I would really appreciate any direction you can give me! Thanks so much!

No, won't work. You *never* change the value of curTests so you will *always* be loading in myTests[1]. Well, you would be if you used [1] instead of (1). JavaScript uses [n] for array element indexing, square brackets instead of parentheses. (You had it right assigning the elements...need to be consistent.)

Simple change:

// an easier way to initialize an array
var myTests=[ "test001.html", "test002.html", "test003.html" ];

var numTests = myTests.length;
var curTests = 0

function nextTests()
{
++curTests; // add one to the testimonial number
if ( curTests >= numTests ) curTests = 0; // but if too many, back to zero
document.getElementById("testFrame").src=myTests[ curTests ]; // put THAT one in place
}

NOTE: You might need/want to put the third line of that function first. That is, don't change the curtest number until after it has been displayed. Can't tell without seeing the rest of your page.

Also: Note that the .length of an array is ONE MORE than it's highest index number. That is, if you have array elements 0,1, and 2, then the length is 3. So your original "if" test was wrong in any case.

Old Pedant: Thank you so much for the help and mostly thank you for taking the time to explain to me my errors! That is the only way I will learn! I have tried to duplicate the next button to make the previous button, however, it is acting very strange. Once I press the previous button it goes to the next testimonial(+1). Then when I press it again it starts going backwords. VERY STRANGE! Any ideas as to why that is happening?

function prevTests()
{
document.getElementById("testFrame").src=myTests[curTests];
--curTests;
}


I also just noticed... If you press the next button it works beautifully. However, if you go to the previous button then hit next... It does the name thing as above. It goes backwords (-1) then when you press next again it starts going forward from there.

Ahh...that's because you need to do the increment/decrement *before* you drop the testimonial in place.

Let's do it all with one function, anyway.

// an easier way to initialize an array
var myTests=[ "test001.html", "test002.html", "test003.html" ];

var numTests = myTests.length;
var curTests = 0;

function nextTests(direction)
{
if ( direction != null ) curTests += direction;
curTest = ( curTests + numTests ) % numTests; // this works both directions
document.getElementById("testFrame").src=myTests[ curTests ]; // put THAT one in place
}

Now, you can use something like
<input type="button" value="Next" onclick="nextTests(1);"/>
<input type="button" value="Previous" onclick="nextTests(-1);"/>

And to drop the first testimonial in place when the page starts, use nextTests(0) or nextTests() (the check for null will make the call default to zero, so "don't move"). Or you can use
window.onload = nextTests;

Same thing.

Thank you so much for your reply. It works perfectly!

I never would have gotten to this on my own... It is back to the tutorials for me! I think I need a better understanding of Javascript! :)

Thanks again!