In this post we will learn how to use next and previous buttons in javascript with demo application , the below example there is image container and next, previous button .
When you click the next button it will display the next image and when you click the previous button it will display the previous image.
In below example
- We have stored the image URLs in images array .
- Declared i variable with default value 0.
- By using the querySelector we are accessing the img element.
- when user clicks the next button the value of i increments by 1 and we are using the i as the index of images array to access the image element
- In same way when user clicks the previous button the value of i decrements by 1 and we are using the i as the index of images array to access the image element
Copy the below code and save it in a file with .html extension and try by yourself
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeLearningPoint</title>
<!-- Basic style -->
<style>
.img-container {
margin: 20px auto;
width: 40%;
}
.btn-container {
text-align: center;
}
img {
height: 400px;
display: block;
margin: auto;
padding-bottom: 20px;
}
button {
outline: none;
padding: 12px;
border: none;
background-color: rgb(25, 121, 211);
border-radius: 8px;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<!-- HTML code for next and previous button -->
<div class="img-container">
<img src="https://codelearningpoint.com/uploads/1627415311.jpg" alt="" class="imageTag">
<div class="btn-container">
<button onclick="previous()">Previous</button>
<button onclick="next()">Next</button>
</div>
</div>
<!-- Javascript code for next and previous button -->
<script>
let images = [
'https://codelearningpoint.com/uploads/1627415311.jpg',
'https://codelearningpoint.com/uploads/1627415323.jpg',
'https://codelearningpoint.com/uploads/1627415302.jpg'
];
let imageTag = document.querySelector('.imageTag');
let i = 0;
function next() {
if (i >= images.length - 1) {
return false;
}
i++;
imageTag.setAttribute('src', images[i]);
}
function previous() {
if (i <= 0) {
return false;
}
i--;
imageTag.setAttribute('src', images[i]);
}
</script>
</body>
</html>
One more example how to use next and previous buttons in javascript with demo application , in the below app if you select next next item tab will be selected and when you click the previous previous tab will be selected.
in Below example
resetClass class is used to remove the selected class from all the item if any item has the selected class. and that function is getting called when you click the previous and next button.
Copy the below code and save it in a file with .html extension and try by yourself
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeLearningPoint</title>
<!-- Basic style -->
<style>
.item-container {
margin: 20px auto;
width: 50%;
}
.btn-container {
text-align: center;
}
li {
display: inline-block;
padding: 20px;
}
.selected {
background-color: rgb(25, 121, 211);
color: ivory;
}
button {
outline: none;
padding: 12px;
border: none;
background-color: rgb(25, 121, 211);
border-radius: 8px;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<!-- HTML code for next and previous button -->
<div class="item-container">
<ul>
<li>ITEM-1</li>
<li>ITEM-2</li>
<li>ITEM-3</li>
<li>ITEM-4</li>
<li>ITEM-5</li>
<li>ITEM-6</li>
</ul>
<div class="btn-container">
<button class="pre" onclick="previous()">Previous</button>
<button class="next" onclick="next()">Next</button>
</div>
</div>
<!-- Javascript code for next and previous button -->
<script>
let children = document.querySelector('ul').children;
let i = 0;
children[i].classList.add('selected');// Item default selection
function resetClass() {
for (let j = 0; j < children.length; j++) {
children[j].classList.remove('selected');
}
}
function next() {
if (i >= children.length - 1) {
return false;
}
resetClass();
i++;
children[i].classList.add('selected')
}
function previous() {
if (i <= 0) {
return false;
}
resetClass();
i--;
children[i].classList.add('selected')
}
</script>
</body>
</html>
I hope this article is helpful for you , i am very glad to help you thanks for reading