尝试在 JavaScript 中进行分页的新手

Question

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

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

Answer 1

您应该在计数器之前使用 --/++ 因为当您在之后使用 increment/decrement 运算符时，值将在之前返回 increased/decreased.

并且无需声明 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>

尝试在 JavaScript 中进行分页的新手

Novice trying to make pagination in JavaScript

javascript

pagination

counter