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!
JavaScript
x
39
39
1
// slides2
3
let item = document.querySelectorAll('.item');4
let btn = document.querySelector('.btn');5
let el_active;6
7
let current = document.querySelector('.current');8
let total = document.querySelector('.total');9
10
function navigate() {11
for (let i = 0, length = item.length; i < length; i++) {12
if (item[i].classList.contains('active')) {13
el_active = i;14
15
current.append(i + 2); 16
17
break;18
}19
}20
item.forEach(function(tab) {21
tab.classList.remove('active');22
});23
if ((el_active + 1) === item.length) {24
item[0].classList.add('active');25
} else {26
item[el_active + 1].classList.add('active');27
}28
29
}30
31
32
33
btn.addEventListener('click', function() {34
navigate();35
sliceAll()36
});37
38
let all = item.length;39
total.append(all);JavaScript
1
6
1
.item {2
display: none;3
}4
.item.active {5
display: block;6
}JavaScript
1
23
23
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<title>Document</title>6
</head>7
<body>8
<div class="items">9
<div class="item active">111</div>10
<div class="item">222</div>11
<div class="item">333</div>12
<div class="item">444</div>13
<div class="item">555</div>14
</div>15
<br>16
<div class="nav">17
<span class="current">1</span> / 18
<span class="total"></span>19
</div>20
<br>21
<button class="btn" type="button">Next</button>22
</body>23
</html>Advertisement
Answer
You need to use textContent instead of append, as append will add but will not reset the old value.
JavaScript
1
39
39
1
// slides2
3
let item = document.querySelectorAll('.item');4
let btn = document.querySelector('.btn');5
let el_active;6
7
let current = document.querySelector('.current');8
let total = document.querySelector('.total');9
10
function navigate() {11
for (let i = 0, length = item.length; i < length; i++) {12
if (item[i].classList.contains('active')) {13
el_active = i;14
15
current.textContent = (i + 2); 16
17
break;18
}19
}20
item.forEach(function(tab) {21
tab.classList.remove('active');22
});23
if ((el_active + 1) === item.length) {24
item[0].classList.add('active');25
} else {26
item[el_active + 1].classList.add('active');27
}28
29
}30
31
32
33
btn.addEventListener('click', function() {34
navigate();35
sliceAll()36
});37
38
let all = item.length;39
total.append(all);JavaScript
1
6
1
.item {2
display: none;3
}4
.item.active {5
display: block;6
}JavaScript
1
23
23
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<title>Document</title>6
</head>7
<body>8
<div class="items">9
<div class="item active">111</div>10
<div class="item">222</div>11
<div class="item">333</div>12
<div class="item">444</div>13
<div class="item">555</div>14
</div>15
<br>16
<div class="nav">17
<span class="current">1</span> / 18
<span class="total"></span>19
</div>20
<br>21
<button class="btn" type="button">Next</button>22
</body>23
</html>