In this article, the task is to create the previous and next button that doesn’t work on the end positions with the help of JavaScript.
Approach:
- Here we are going to add a disabled attribute to the pre button when it is at the start position which is 1 for us and remove the disabled attribute when it is not at the start (1) position.
- And same for the next button, add a disabled attribute when it is at the end position which is 5 for us, and remove the disabled attribute when it is not at the end position.
Example: This example shows the use of the above-explained approach.
HTML
<!DOCTYPE html> <html lang="en">
<body>
<div class="container">
<div class="no-box">
<span class="no">1</span>
</div>
<button class="btn" onclick="prev()">
prev
</button>
<button class="btn" onclick="next()">
next
</button>
</div>
</body>
</html>
|
CSS
.container { margin: 100px 400px;
} .no-box { padding-left: 30px;
font-size: 60px;
} .btn { background-color: rgb(179, 179, 179);
} .btn:hover { color: white;
background-color: green;
} |
Javascript
<script> var no_box = document
.querySelector('.no-box');
var i = 1;
function prev() {
// Start position
if (i == 1) {
// Add disabled attribute on
// prev button
document.getElementsByClassName(
'prev').disabled = true;
// Remove disabled attribute
// from next button
document.getElementsByClassName(
'next').disabled = false;
} else {
i--;
return setNo();
}
}
function next() {
// End position
if (i == 5) {
// Add disabled attribute on
// next button
document.getElementsByClassName(
'next').disabled = true;
// Remove disabled attribute
// from prev button
document.getElementsByClassName(
'prev').disabled = false;
} else {
i++;
return setNo();
}
}
function setNo() {
// Change innerhtml
return no_box.innerHTML = i;
}
</script> |
Output: Click here to check the live Output.
Create previous and next button and non-working on end position