CODEWITHSUNDEEP
javascript
Stan Law
Stan Law

Reputation: 61

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

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

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>

Upvotes: 1

Views: 29

Answers (1)

Mina
Mina

Reputation: 17029

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>

Upvotes: 1

Related Questions