How to make pagination (number of the current element)?

August 6, 2022

I want to make a navigation, that looks like 1/5 then 2/5 then 3/5 and so on.

the first digit is the number of the current page
the second digit is the total number of pages

At the moment, everything works, except for the number of the current page: it is created, but the old one is not deleted.

Thank you in advance!

// slides

let item = document.querySelectorAll('.item');
let btn = document.querySelector('.btn');
let el_active;

let current = document.querySelector('.current');
let total = document.querySelector('.total');

function navigate() {
    for (let i = 0, length = item.length; i < length; i++) {
    if (item[i].classList.contains('active')) {
            el_active = i;
        
        current.append(i + 2);        
        
        break;
        }
  }
  item.forEach(function(tab) {
        tab.classList.remove('active');
    });
    if ((el_active + 1) === item.length) {
        item[0].classList.add('active');
    } else {
        item[el_active + 1].classList.add('active');
    }
  
}



btn.addEventListener('click', function() {
    navigate();
  sliceAll()
});

let all = item.length;
total.append(all);

.item {
  display: none;
}
.item.active {
  display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="items">
    <div class="item active">111</div>
    <div class="item">222</div>
    <div class="item">333</div>
    <div class="item">444</div>
    <div class="item">555</div>
  </div>
  <br>
  <div class="nav">
    <span class="current">1</span> / 
    <span class="total"></span>
  </div>
  <br>
  <button class="btn" type="button">Next</button>
</body>
</html>

>Solution :

You need to use textContent instead of append, as append will add but will not reset the old value.

// slides

let item = document.querySelectorAll('.item');
let btn = document.querySelector('.btn');
let el_active;

let current = document.querySelector('.current');
let total = document.querySelector('.total');

function navigate() {
    for (let i = 0, length = item.length; i < length; i++) {
    if (item[i].classList.contains('active')) {
            el_active = i;
        
        current.textContent = (i + 2);        
        
        break;
        }
  }
  item.forEach(function(tab) {
        tab.classList.remove('active');
    });
    if ((el_active + 1) === item.length) {
        item[0].classList.add('active');
    } else {
        item[el_active + 1].classList.add('active');
    }
  
}



btn.addEventListener('click', function() {
    navigate();
    sliceAll()
});

let all = item.length;
total.append(all);

.item {
  display: none;
}
.item.active {
  display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="items">
    <div class="item active">111</div>
    <div class="item">222</div>
    <div class="item">333</div>
    <div class="item">444</div>
    <div class="item">555</div>
  </div>
  <br>
  <div class="nav">
    <span class="current">1</span> / 
    <span class="total"></span>
  </div>
  <br>
  <button class="btn" type="button">Next</button>
</body>
</html>