新手尝试在 JavaScript 中进行分页答案

【问题标题】：Novice trying to make pagination in JavaScript新手尝试在 JavaScript 中进行分页
【发布时间】：2020-01-14 07:06:04
【问题描述】：

试图使这个带有按钮的计数器根据点击次数增加或减少，但是在第一次点击时计数器不会增加。如果我做+ 1，它会但随后会停止。 ++ 有效，但只有在第一次点击之后。试图学习简单的方法来解决我的代码，这不是一个巨大的变化。

https://jsfiddle.net/sy0ohtrc/

var pageCount = 1;
var elPage = document.getElementById("currentPage");
elPage.innerHTML = pageCount; 

//Get next button and add connect function on click
var elNext = document.getElementById("nextButton");
elNext.addEventListener("click", nextPage);


function nextPage() {
    var elPageIncrease = document.getElementById("currentPage");
    elPageIncrease.innerHTML = pageCount++;
}


var elPrev = document.getElementById("prevButton");
elPrev.addEventListener("click", prevPage);

function prevPage() {
    var elPageDecrease = document.getElementById("currentPage");
    elPageDecrease.innerHTML = pageCount--;
}

【问题讨论】：

看看codeburst.io/javascript-increment-and-decrement-8c223858d5ed，看看为什么它是 ++a 而不是 a++。

标签： javascript pagination counter

【解决方案1】：

您应该在计数器之前使用--/++，因为当您在之后使用递增/递减运算符时，该值将在它增加/减少之前返回。

并且不需要声明 3 次相同的元素。

最后将innerHTML 更改为textContent（如果您想知道为什么要阅读this 线程）。

您的代码应如下所示：

var pageCount = 1;
var elPage = document.getElementById("currentPage");
elPage.textContent = pageCount;

//Get next button and add connect function on click
var elNext = document.getElementById("nextButton");
elNext.addEventListener("click", nextPage);


function nextPage() {
//    var elPageIncrease = document.getElementById("currentPage"); you have elPage already pointing this element
    elPage.textContent = ++pageCount;
}


var elPrev = document.getElementById("prevButton");
elPrev.addEventListener("click", prevPage);

function prevPage() {
//    var elPageDecrease = document.getElementById("currentPage");  you have elPage already pointing this element
    elPage.textContent = --pageCount;
}

<div class="pager">
  <button id="prevButton">prev</button>
  <p class="pageNumber" id="currentPage"></p>
  <button id="nextButton">next</button>
</div>

【讨论】：