Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create the previous and next buttons and non-working on the end positions using JavaScript?
We can create previous and next buttons that are disabled at their end positions using vanilla JavaScript. JavaScript allows us to control and manipulate DOM elements easily. Here, we will create navigation buttons and change an HTML element's content depending on which button is clicked.
Example 1: Counter with Disabled States
In this example, we will create "Next" and "Previous" buttons that increment and decrement a counter. The buttons will be disabled when they reach their extreme positions (0 for Previous and 5 for Next).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Previous and Next Buttons with Disabled States</title>
</head>
<body>
<h3>Counter Navigation</h3>
<p id="counter">3</p>
<div>
<button id="prev">Previous</button>
<button id="next">Next</button>
</div>
<script>
const nextBtn = document.getElementById('next');
const prevBtn = document.getElementById('prev');
const counter = document.getElementById('counter');
let currentValue = 3;
function updateButtons() {
prevBtn.disabled = currentValue === 0;
nextBtn.disabled = currentValue === 5;
}
nextBtn.addEventListener('click', () => {
if (currentValue < 5) {
currentValue++;
counter.textContent = currentValue;
updateButtons();
}
});
prevBtn.addEventListener('click', () => {
if (currentValue > 0) {
currentValue--;
counter.textContent = currentValue;
updateButtons();
}
});
// Initialize button states
updateButtons();
</script>
</body>
</html>
Example 2: Visual Element Navigation
This example demonstrates navigation by moving a visual element (dot) horizontally. The buttons control the position and are disabled at the boundaries.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Visual Navigation with Disabled States</title>
<style>
body {
position: relative;
padding: 20px;
}
.dot {
background-color: #007bff;
height: 20px;
width: 20px;
border-radius: 50%;
position: absolute;
top: 80px;
left: 0%;
transition: left 0.3s ease;
}
.controls {
margin-top: 120px;
}
button {
margin: 5px;
padding: 8px 16px;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>
</head>
<body>
<h3>Visual Element Navigation</h3>
<div class="dot"></div>
<div class="controls">
<button id="moveLeft">Move Left</button>
<button id="moveRight">Move Right</button>
</div>
<script>
const moveLeftBtn = document.getElementById('moveLeft');
const moveRightBtn = document.getElementById('moveRight');
const dot = document.querySelector('.dot');
let position = 0;
const maxPosition = 80;
const step = 10;
function updateButtons() {
moveLeftBtn.disabled = position === 0;
moveRightBtn.disabled = position === maxPosition;
}
moveRightBtn.addEventListener('click', () => {
if (position < maxPosition) {
position += step;
dot.style.left = `${position}%`;
updateButtons();
}
});
moveLeftBtn.addEventListener('click', () => {
if (position > 0) {
position -= step;
dot.style.left = `${position}%`;
updateButtons();
}
});
// Initialize button states
updateButtons();
</script>
</body>
</html>
Key Features
Both examples demonstrate important navigation principles:
- Boundary Checking: Prevents navigation beyond defined limits
- Visual Feedback: Disabled buttons provide clear user feedback
- State Management: Button states update automatically based on current position
-
Accessibility: Using
disabledattribute for proper accessibility support
Implementation Tips
When implementing navigation buttons:
- Use the
disabledproperty instead of just returning early from event handlers - Create an
updateButtons()function to centralize state management - Initialize button states on page load
- Add visual styling for disabled states to improve user experience
Conclusion
Creating previous and next buttons with proper disabled states enhances user experience by providing clear navigation boundaries. The key is combining boundary checking with visual feedback through the disabled attribute.
1K+ Views
