Question

Well, one more question. Since I started learning javascript short time ago, I am almost obsessed trying new things! Here it goes:

Let’s say that I have an array of strings and I want to iterate on it with a navigation menu with the buttons FIRST, PREVIOUS, NEXT, LAST.

Look at this code:

var thearray = ["article1", "article2", "article3"];

var thebody = document.getElementsByTagName('body')[0];
var divcontainer = document.createElement("div");
var divpage = document.createElement("div");

function generatepage(article) {
    var paragraph = document.createElement("p");
    var name = document.createTextNode(thearray[article]);
    paragraph.appendChild(name);
    divpage.appendChild(paragraph);
}

divcontainer.appendChild(divpage);
thebody.appendChild(divcontainer);


generatepage(0); // that would be for the first article

I also figured out that generatepage(thearray.length -1)would be the call for the last article, so I have solved two buttons (before generating new content I would erase it with innerHTMLbut what I cannot think about how to do are the PREVIOUS and NEXT buttons…

Do you have any suggestion about how should I get started to make working PREVIOUS and NEXT?

I attach a JSFiddle

Thank you so much for any advice!

Answer 1

You can save the active page in a variable outside the function:

var page = 0;

Then you don’t need to bring any page into generatepage():

function generatepage() {
    var paragraph = document.createElement("p");
    var name = document.createTextNode(thearray[page]);
    paragraph.appendChild(name);
    divpage.appendChild(paragraph);
}

Now you can control the page from outside the function:

var next = function() {
    if ( page < page.length-1 ) { page++; }
}

var prev = function() {
    if ( page ) { page--; }
}

So to show the first page:

page = 0;
generatepage()

And the next:

next();
generatepage()

etc…. There are other ways too of course but this might give you an idea.