How to create previous and next button and non-working on end position using JavaScript ?
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() {
if (i == 1) {
document.getElementsByClassName(
'prev' ).disabled = true ;
document.getElementsByClassName(
'next' ).disabled = false ;
} else {
i--;
return setNo();
}
}
function next() {
if (i == 5) {
document.getElementsByClassName(
'next' ).disabled = true ;
document.getElementsByClassName(
'prev' ).disabled = false ;
} else {
i++;
return setNo();
}
}
function setNo() {
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
Last Updated :
16 Jan, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...