How to increment value from javascript to html?

Question

I want to make a very simple buttons to switch pages ("next" and "previous"). I've got my page paginated like that.

function showPages(id = 1) {
  var totalNumberOfPages = 6;
  for (var i = 1; i <= totalNumberOfPages; i++) {
    if (document.getElementById('page' + i)) {
      document.getElementById('page' + i).style.display = 'none';
    }
  }
  if (document.getElementById('page' + id)) {
    document.getElementById('page' + id).style.display = 'block';
  }
};

showPages();

<span style="float: left;">
  <a href="#" onclick="javascript:showPages(id--)">Previous</a>
</span>

<span style="float: right;">
  <a href="#" onclick="javascript:showPages(id++)">Next</a>
</span>

When I click on "next" or "previous" button, it behave strangely. Sometimes it goes to the next page, sometimes it doesn't...

(sub-question: How can I do to restrain the code so it doesn't try to display a -1 page or a page number above the maximum number of page?

if (element exists) hide it if(element exists) show it.....

epascarello
– epascarello

2018-09-18 18:03:37 +00:00
Commented Sep 18, 2018 at 18:03 — epascarello
– epascarello, Commented Sep 18, 2018 at 18:03

davidethell · Accepted Answer · 2018-09-18 18:04:01Z

3

Do not use id-- or id++ in your links because this is modifying the actual page id. Instead use +1 or -1 like this:

<span style="float: left;">
    <a href="#" onclick="javascript:showPages(id - 1)">Previous</a>
</span>

<span style="float: right;">
    <a href="#" onclick="javascript:showPages(id + 1)">Next</a>
</span>

answered Sep 18, 2018 at 18:04

davidethell

12.1k6 gold badges47 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user4913087 Over a year ago

It's not working, unfortunately. id - 1 links to a non-existing page "page-1" and "id + 1" to "page+1", but not the "actual page" + 1 page. I mean, it doesn't increment the number of the page being viewed :/

davidethell Over a year ago

You'll have to update your logic to consider the problem of being on the first or last page and not adding the link in that situation.

user4913087 Over a year ago

I guess the problem is that I use anchors. I believe this is why no data are stored in "id", nor incremented. I'm actually looking for a way to solve that problem.

Collectives™ on Stack Overflow

How to increment value from javascript to html?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related