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>Advertisement
Answer
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>