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 display JavaScript array items one at a time in reverse on button click?
In this tutorial, we'll learn how to display JavaScript array items one at a time in reverse order when a button is clicked. This technique is useful for creating step-by-step displays or interactive presentations.
The Array and Button Setup
First, let's define our array of names:
var listOfNames = [
'John',
'David',
'Bob'
];
And create a button that will trigger the reverse display:
<button id="reverse" onclick="reverseTheArray()">Click The Button To get the Reverse Value</button>
How It Works
The approach involves:
- Starting from the array's last index (length - 1)
- Displaying one item at a time on each button click
- Decrementing the index after each display
- Resetting to the last index when we reach the beginning
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reverse Array Display</title>
</head>
<body>
<div align="center" id='reverseTheArray'></div>
<button id="reverse" onclick="reverseTheArray()">Click The Button To get the Reverse Value</button>
<script>
var listOfNames = [
'John',
'David',
'Bob'
];
var count = listOfNames.length - 1;
function reverseTheArray() {
document.getElementById('reverseTheArray').innerHTML = listOfNames[count];
count--;
if (count < 0) {
count = listOfNames.length - 1;
}
}
</script>
</body>
</html>
Step-by-Step Execution
Initial State: The display area is empty, and count is set to 2 (last index).
First Click: Displays "Bob" (index 2), count becomes 1.
Second Click: Displays "David" (index 1), count becomes 0.
Third Click: Displays "John" (index 0), count becomes -1, then resets to 2.
Fourth Click: Cycle repeats with "Bob" again.
Alternative Implementation
Here's a cleaner version using modern JavaScript practices:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reverse Array Display - Modern</title>
</head>
<body>
<div id="display" style="margin: 20px; font-size: 18px; font-weight: bold;"></div>
<button onclick="showNext()">Show Next Name in Reverse</button>
<script>
const names = ['John', 'David', 'Bob'];
let currentIndex = names.length - 1;
function showNext() {
document.getElementById('display').textContent = names[currentIndex];
currentIndex = currentIndex === 0 ? names.length - 1 : currentIndex - 1;
}
</script>
</body>
</html>
Key Points
- Initialize the counter to
array.length - 1to start from the last element - Use conditional logic to reset the counter when it goes below zero
- The ternary operator provides a concise way to handle the reset condition
- Each button click displays exactly one array item in reverse order
Conclusion
This technique allows you to cycle through array items in reverse order with each button click. The counter automatically resets when reaching the beginning, creating an infinite loop of reverse display.
832 Views
