Начинающий пытается сделать нумерацию страниц в JavaScript - PullRequest
Новая
       7

Начинающий пытается сделать нумерацию страниц в JavaScript

0 голосов
/ 14 января 2020

Попытка сделать так, чтобы этот счетчик с кнопками увеличивался или уменьшался в зависимости от кликов, однако при первом щелчке счетчик не увеличивается. Если я сделаю +1, это будет, но потом остановится. ++ работает, но только после первого клика. Пытаюсь изучить простой способ решения моего кода, который не является изменением c.

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

1 Ответ

1 голос
/ 14 января 2020

Вы должны использовать - / ++ перед счетчиком, потому что когда вы используете оператор увеличения / уменьшения после, значение будет возвращено до , когда оно увеличивается / уменьшается.

И нет необходимости объявлять 3 раза один и тот же элемент.

Наконец, измените innerHTML на textContent (и если вы хотите узнать, зачем читать этот поток).

Ваш код должен выглядеть примерно так: 

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