javascript - 如何从 javascript 到 html 增加值？

Question

我想制作一个非常简单的按钮来切换页面(“下一页”和“上一页”)。我的页面已经这样分页了。

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>

当我单击“下一个”或“上一个”按钮时，它的行为很奇怪。有时会进入下一页，有时不会...

(子问题:如何限制代码，使其不会尝试显示 -1 页或高于最大页数的页码？

Answer 1

不要在链接中使用 id-- 或 id++，因为这会修改实际的页面 ID。而是使用 +1 或 -1，如下所示:

<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>