I have created a small array called fruits.
what I want to do is if I click the next button web page shows the next value of the array. then if I press the previous button web page shows the previous value of the array
please need your support to short this out.
let fruits=['apple','mango','banana','orange']
let left = document.querySelector('.lef');
let right = document.querySelector('.rig');
let text = document.querySelector('.text');
let crunt=text.innerHTML=fruits[0];
fruits.forEach(element => {
left.addEventListener('click', () => {
text.innerHTML=fruits;
});
});.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
display: flex;
gap: 420px;
}
.lef, .rig{
font-size: 70px;
font-weight: 700;
background: none;
border: none;
cursor: pointer;
}
.text{
width: auto;
height: 50px;
font-size: 30px;
background-color: antiquewhite;
display: grid;
place-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
}<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="btn">
<button class="lef"><</button>
<button class="rig">></button>
</div>
<div class="text"></div>
<script src="script.js"></script>
</body>
</html>Attach a listener to each arrow button that calls a corresponding function when the button is clicked.
Initialise the index. When a button is clicked each function checks to see if the next index is within the bounds of the array, and if it is either increases/decreases the index, and then updates the text with the element in the array at that new index.
const fruits = ['apple', 'mango', 'banana', 'orange']
const left = document.querySelector('.lef');
const right = document.querySelector('.rig');
const text = document.querySelector('.text');
text.textContent = fruits[0];
left.addEventListener('click', handleLeft);
right.addEventListener('click', handleRight);
let index = 0;
function handleLeft() {
if (index > 0) {
text.textContent = fruits[--index];
}
}
function handleRight() {
if (index < fruits.length - 1) {
text.textContent = fruits[++index];
}
}.btn,.text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.btn{display:flex;gap:120px}.lef,.rig{font-size:70px;font-weight:700;background:0 0;border:none;cursor:pointer}.text{width:auto;height:50px;font-size:30px;background-color:#faebd7;display:grid;place-items:center;padding:.2em .4em}<div class="btn">
<button class="lef"><</button>
<button class="rig">></button>
</div>
<div class="text"></div>Currently, you apply an event listener to the element with the class lef and no event listener to the other button. Also, you do this inside a loop, so that one (identical) event listener is applied for each element of your array. What you are meaning to do is something like this:
const fruits = ["Apple", "Mango", "Banana", "Orange"];
// Current Element
let i = 0;
// Text Field
const text = document.querySelector(".text");
text.textContent = fruits[0];
// Event Listener: Left Button
document.querySelector(".left").addEventListener("click", () => {
if (--i < 0) i = fruits.length - 1;
text.textContent = fruits[i];
});
// Event Listener: Right Button
document.querySelector(".right").addEventListener("click", () => {
i = ++i % fruits.length;
text.textContent = fruits[i];
});body {
display: flex;
justify-content: space-between;
align-items: center;
}<button type="button" class="left">Left</button>
<div class="text"></div>
<button type="button" class="right">Right</button>First, I declare a variable to keep track of the currently displayed fruit. Then, I display the first fruit and add the event listeners to the buttons. The event listener for the left button decrements the index variable, or sets it to the last element if we reached the first element. The event listener for the right button increments the index variable, or sets it to the first element if we reached the last element.
First I would recommend using < and > instead of < and > in your HTML.
In the following snippet right and left button are listening on the events and in case the index goes beyond the limits of the fruits array, it is being limited by subtraction and modulo operator.
let fruits = ['apple', 'mango', 'banana', 'orange']
let left = document.querySelector('.lef');
let right = document.querySelector('.rig');
let text = document.querySelector('.text');
text.innerHTML = fruits[0];
left.addEventListener('click', () => {
const index = fruits.indexOf(text.innerHTML);
text.innerHTML = fruits[index > 0 ? index - 1 : fruits.length - 1];
});
right.addEventListener('click', () => {
const index = fruits.indexOf(text.innerHTML);
text.innerHTML = fruits[(fruits.indexOf(text.innerHTML) + 1) % fruits.length];
});.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
gap: 420px;
}
.lef,
.rig {
font-size: 70px;
font-weight: 700;
background: none;
border: none;
cursor: pointer;
}
.text {
width: auto;
height: 50px;
font-size: 30px;
background-color: antiquewhite;
display: grid;
place-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="btn">
<button class="lef"><</button>
<button class="rig">></button>
</div>
<div class="text"></div>
<script src="script.js"></script>
</body>
</html>