How to get array element one by one in js-CodePudding

I want to change image and text by clicking the button using the array but the entire array shows when clicking the button

How do I create a loop for this? so that the array element shows one by one.

const arr = [
  {
    img: "https://www.tourmyindia.com/blog//wp-content/uploads/2021/10/Best-Places-to-Visit-in-Bhopal-MP-Sanchi-Stupa.jpg",
    place: "BHOPAL",
    state: "MADHYA PRADESH",
  },
  {
    img: "https://www.tourmyindia.com/blog//wp-content/uploads/2021/10/Best-Places-to-Visit-in-Bhopal-MP-Sanchi-Stupa.jpg",
    place: "MUMBAI",
    state: "MAHARASHTRA",
  },
];

function show(){
let cluster = "";
arr.forEach((item) => {
    cluster =
      cluster  
      ` <h1>${item.place}</h1>
                <div ></div>
                <h3>${item.state}</h3>
                <div >
                    <i ></i>
                    <div ></div>
                    <i ></i>
                </div>`;
  });
document.getElementById("cluster").innerHTML = cluster;
};

document.getElementById("random").addEventListener("click", function(){
  show();
});

CodePudding user response：

Instead of using foreach loop use index value to get data. Your code should be

var counter = 0;
const arr = [
  {
    img: "https://www.tourmyindia.com/blog//wp-content/uploads/2021/10/Best-Places-to-Visit-in-Bhopal-MP-Sanchi-Stupa.jpg",
    place: "BHOPAL",
    state: "MADHYA PRADESH",
  },
  {
    img: "https://www.tourmyindia.com/blog//wp-content/uploads/2021/10/Best-Places-to-Visit-in-Bhopal-MP-Sanchi-Stupa.jpg",
    place: "MUMBAI",
    state: "MAHARASHTRA",
  },
];

function show(){
    let cluster = "";
    if (counter<arr.length){
        cluster =
          cluster  
          ` <h1>${arr[counter].place}</h1>
                    <div ></div>
                    <h3>${arr[counter].state}</h3>
                    <div >
                        <i ></i>
                        <div ></div>
                        <i ></i>
                    </div>`;
        document.getElementById("cluster").innerHTML = cluster;
        counter  ;
    }
    
}

document.getElementById("random").addEventListener("click", function(){
  show();
});

CodePudding user response：

what i understand please try this

const arr = [{
    img: "https://www.tourmyindia.com/blog//wp-content/uploads/2021/10/Best-Places-to-Visit-in-Bhopal-MP-Sanchi-Stupa.jpg",
    place: "BHOPAL",
    state: "MADHYA PRADESH",
  },
  {
    img: "https://www.tourmyindia.com/blog//wp-content/uploads/2021/10/Best-Places-to-Visit-in-Bhopal-MP-Sanchi-Stupa.jpg",
    place: "MUMBAI",
    state: "MAHARASHTRA",
  },
  {
    img: "https://www.tourmyindia.com/blog//wp-content/uploads/2021/10/Best-Places-to-Visit-in-Bhopal-MP-Sanchi-Stupa.jpg",
    place: "Bur",
    state: "Dubai",
  },
  {
    img: "https://www.tourmyindia.com/blog//wp-content/uploads/2021/10/Best-Places-to-Visit-in-Bhopal-MP-Sanchi-Stupa.jpg",
    place: "Chinnai",
    state: "MAHARASHTRA",
  }
];

let cluster = "";
let i = 0;

function show() {
  if (i === arr.length) return;
  item = arr[i];
  let clusterElem = document.getElementById("cluster");
  if (i === 0) {
    cluster = cluster  
      ` <div ><h1>${item.place}</h1>
                <div ></div>
                <h3>${item.state}</h3>
                <div >
                    <i ></i>
                    <div ></div>
                    <i ></i>
                </div></div>`;
    clusterElem.innerHTML = cluster;
  } else {
    cluster = cluster  
      `<div ><h1>${item.place}</h1>
                <div ></div>
                <h3>${item.state}</h3>
                <div >
                    <i ></i>
                    <div ></div>
                    <i ></i>
                </div></div>`;
    clusterElem.innerHTML = cluster;
  }
  i  ;
};

document.getElementById("random").addEventListener("click", function() {
  show();
});

<div id="cluster"></div>
<button id="random"> Click</button>

CodePudding user response：

To create a loop that displays the elements of an array one by one, you can use a for loop or a while loop. Here's an example of how you can use a for loop to accomplish this:

// Define an array of images and texts
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
const texts = ['text1', 'text2', 'text3'];

// Define a counter variable to keep track of the current index
let counter = 0;

// Define a function to update the image and text
function updateImageAndText() {
  // Set the src attribute of the image element to the current image
  document.getElementById('image').src = images[counter];

  // Set the text of the text element to the current text
  document.getElementById('text').innerHTML = texts[counter];

  // Increment the counter variable
  counter  ;

  // If the counter variable is equal to the length of the images array, reset it to 0
  if (counter === images.length) {
    counter = 0;
  }
}

// Add an event listener to the button element to call the updateImageAndText function when the button is clicked
document.getElementById('button').addEventListener('click', updateImageAndText);

This code will update the image and text elements with the next element in the images and texts arrays each time the button is clicked. When the end of the array is reached, the counter variable is reset to 0 and the loop starts over from the beginning.

Alternatively, you can use a while loop to achieve the same result:

// Define an array of images and texts
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
const texts = ['text1', 'text2', 'text3'];

// Define a counter variable to keep track of the current index
let counter = 0;

// Define a function to update the image and text
function updateImageAndText() {
  // Set the src attribute of the image element to the current image
  document.getElementById('image').src = images[counter];

  // Set the text of the text element to the current text
  document.getElementById('text').innerHTML = texts[counter];

  // Increment the counter variable
  counter  ;

  // If the counter variable is equal to the length of the images array, reset it to 0
  if (counter === images.length) {
    counter = 0;
  }
}

// Add an event listener to the button element to call the updateImageAndText function when the button is clicked
document.getElementById('button').addEventListener('click', updateImageAndText);

In this case, the loop will run indefinitely as long as the button is being clicked. Each time the button is clicked, the updateImageAndText function will be called and the image and text elements will be updated with the next element in the images and texts arrays. When the end of the array is reached, the counter variable is reset to 0 and the loop starts over from the beginning.

CodePudding user response：

I think there is no need to loop through the array. You just need to maintain a counter here.

const arr = [
  {
    img: "https://www.tourmyindia.com/blog//wp-content/uploads/2021/10/Best-Places-to-Visit-in-Bhopal-MP-Sanchi-Stupa.jpg",
    place: "BHOPAL",
    state: "MADHYA PRADESH",
  },
  {
    img: "https://www.tourmyindia.com/blog//wp-content/uploads/2021/10/Best-Places-to-Visit-in-Bhopal-MP-Sanchi-Stupa.jpg",
    place: "MUMBAI",
    state: "MAHARASHTRA",
  },
];

function show(index){
    
    let cluster =  ` <h1>${arr[counter].place}</h1>
                    <div ></div>
                    <h3>${arr[counter].state}</h3>
                    <div >
                        <i ></i>
                        <div ></div>
                        <i ></i>
                    </div>`;

    
document.getElementById("cluster").innerHTML = cluster;
};

var counter = 0;

document.getElementById("random").addEventListener("click", function(){

  show(counter);
    if(counter<arr.length-1){
    counter  ;
    }
    else{
    counter = 0;
    }
});

please don't use cluster as it will concatenate the previous data too.