Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create previous and next button and non-working on end position using JavaScript?
There are many ways to create previous and next button and non-working on-end positions using JavaScript. We will cover two approaches to achieve this functionality - one using normal if conditions and the other using the "disabled" attribute. The second approach utilizes the "disabled" attribute to make the button not clickable and updates the button style for nonworking end positions. By implementing these techniques, we can easily navigate through a set of elements, making the user experience more seamless and intuitive.
Let’s see both methods with examples for creating this kind of button in JavaScript.
Using only if conditions
We will create two buttons, "prev" and "next" with click event listener and keep track of the current position using a variable. On button click, it updates the current position and calls a function to update the UI. This method will make buttons functional and non-functional by using if conditions.
Syntax
Users can follow the syntax below to create previous and next buttons that do not work on end positions.
// for prev button
if (currentPosition > 0) {
currentPosition--;
updateContent() ;
}
// for next button
if (currentPosition < maxPosition) {
currentPosition++;
updateContent();
}
function updateContent() {
// update UI or make API call here
}
We are making previous and next buttons non-working at the end positions by applying simple if conditions.
Approach
In this approach, we follow the below given steps −
Step 1 − Create a HTML page with two buttons, "prev" and "next" and an empty div with the id "content".
Step 2 − Define a currentPosition variable and set it to 0.
Step 3 − Define a maxPosition variable and set it to the maximum number of elements.
Step 4 − Add a click event listener to the "prev" button.
Step 4.1 − In the click event listener for the "prev" button, check if the currentPosition is greater than 0. If it is, decrement the currentPosition by 1 and call updateContent( ) function.
Step 5 − Add a click event listener to the "next" button.
Step 5.1 − In the click event listener for the "next" button, check if the currentPosition is less than maxPosition. If it is, increment the currentPosition by 1 and call updateContent( ) function.
Step 6 − Create a function updateContent( ) that updates the UI or makes an API call.
Step 6.1 − In the updateContent( ) function, update the innerHTML of the "content" div with the currentPosition value.
Example
In the below example, we are creating two buttons, "prev" and "next" with click event listeners; we will perform an appropriate operation and will update the UI according to the change in the value of currentPosition after any button is clicked by the user.
<html>
<head>
<title>Previous and Next Buttons: non-working on end positions</title>
</head>
<body>
<div id = "content" ></div>
<button id = "prev" > Previous </button>
<button id = "next" > Next </button>
<script>
var currentPosition = 0;
var maxPosition = 10;
updateContent();
document.getElementById("prev").addEventListener("click", function() {
if (currentPosition > 0) {
currentPosition--;
updateContent() ;
}
});
document.getElementById("next").addEventListener("click", function() {
if (currentPosition < maxPosition) {
currentPosition++;
updateContent() ;
}
});
function updateContent(){
// update UI or make API call here
var content = document.getElementById("content");
content.innerHTML = "Current Position: " + currentPosition + "<br> <br>" ;
}
</script>
</body>
</html>
Users can check the output on our online JavaScript editor to see how these buttons are functioning.
Using the disabled attribute
We can do the same thing using the “disabled” attribute. It is used to make the button nonfunctional or not clickable. Using the “disabled” attribute, we will disable buttons when they are at end positions. Here, we will update the button style for non-working-on-end positions.
Syntax
Users can follow the below syntax to create previous and next button, which does not work on end positions using disabled.
// To disable the prev button
document.getElementById("prevBtn").disabled = true;
// To disable next button
document.getElementById("nextBtn").disabled = true;
Setting the disabled property to true makes the button not clickable. We will set true value for previous and next button at the end positions to make them not clickable.
Example
In the below example, “disabled” is used on both the "prevBtn" and "nextBtn" buttons to prevent the user from clicking them when they have reached the beginning or end of the list, respectively. When the "prevBtn" is clicked, and the current position is at the beginning of the list, the disabled attribute is set to true on the button, making it unclickable. Similarly, when the "nextBtn" is clicked, and the current position is at the end of the list, the disabled attribute is set to true on the button, making it unclickable. This is used to prevent the user from going beyond the first and last element of the list.
<html>
<head>
<title>Previous and Next Buttons: non-working on end positions</title>
</head>
<body>
<div id = "content" > </div>
<button id="prevBtn" disabled > Previous </button>
<button id = "nextBtn" >Next </button>
<script>
let maxItem = 10;
let currentItem = 0;
prevBtn.style.backgroundColor = "red";
updateContent();
document.getElementById("prevBtn").addEventListener("click", function() {
if(currentItem > 0) {
currentItem--;
document.getElementById("nextBtn").disabled = false;
nextBtn.style.backgroundColor = "";
}
if(currentItem === 0) {
this.disabled = true;
prevBtn.style.backgroundColor = "red";
}
updateContent() ;
});
document.getElementById("nextBtn").addEventListener("click", function() {
if(currentItem < maxItem) {
currentItem++;
document.getElementById("prevBtn").disabled = false;
prevBtn.style.backgroundColor = "";
}
if(currentItem === maxItem) {
this.disabled = true;
nextBtn.style.backgroundColor = "red";
}
updateContent() ;
});
function updateContent() {
// update UI or make API call here
var content = document.getElementById("content");
content.innerHTML = "Current Item: " + currentItem + "<br><br>";
}
</script>
</body>
</html>
Users can check the output on our online JavaScript editor to see how these buttons and the color is changing according to its position.
We have learned two different methods for creating previous and next buttons using JavaScript. The first method involves using simple if conditions. In contrast, the second method utilizes the "disabled" attribute to make the button not clickable and updates the button style for non-working end positions.
5K+ Views
