How to access the next value and previous value of an array in JS

Question

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%);
}




    
    
    
    
    Document

user_1377002 · Answer

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}

user_19526639 · Answer

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;
}

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.

user_8845480 · Answer

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%);
}





  
  
  
  
  Document

How to access the next value and previous value of an array in JS

3 Answers