CODEWITHSUNDEEP
javascripthtmlloops
khiz
khiz

Reputation: 37

How to loop through an array on the click of a button?

I want to loop through the list artists and each time the button is pressed, I want the next artist to be added in the <p> tag.

let para = document.querySelector('p');

const artists = ['Atif Aslam', 'Nusrat Fateh Ali Khan', 'Kendrick Lamar', 'Travis Scot', 'JCole', 'Sidhu', 'Ataullah EsaKheilvi'];
let info = 'One of my top favorite artist is '


function myArt() {
  for (i = 0; i < artists.length; i++) {
    para.textContent = info + artists[i];
  }
}
<body>

  <button id="myArtists" onclick="myArt()"> Click To Find Out!</button>
  <p> </p>
</body>

Upvotes: 1

Views: 124

Answers (4)

V. Sambor
V. Sambor

Reputation: 13389

You don't need a loop. Just use a global variable for the current index pointer.

A simple way to have this working, plus for a circular 'looping' when clicking on the button.
You could use module index % artists.length which will mirror the index:

const $p = document.querySelector('p');
const textPrefix = 'One of my top favorite artist is: ';
const artists = ['Atif Aslam', 'Nusrat Fateh Ali Khan', 'Kendrick Lamar', 'Travis Scot', 'JCole', 'Sidhu', 'Ataullah EsaKheilvi'];
let currentArtistIndex = 0;

function nextArtist() {
  $p.innerText = `${textPrefix}${artists[currentArtistIndex++ % artists.length]}`; 
}
<body>
  <button id="myArtists" onclick="nextArtist()"> Click To Find Out The Next Artist!</button>
  <p> </p>
</body>

Upvotes: 0

Jens Ingels
Jens Ingels

Reputation: 816

You don't really need to loop through it if you just keep track of the index. You could use a global variable or code it as an attribute like this:

const artists = ['Atif Aslam', 'Nusrat Fateh Ali Khan', 'Kendrick Lamar', 'Travis Scot', 'JCole', 'Sidhu', 'Ataullah EsaKheilvi'];
let info = 'One of my top favorite artist is '

const setup = () => {

  const myArtists = document.querySelector('#myArtists');
  myArtists.addEventListener('click', myArt);

};

const myArt = (event) => {
  const button = event.target;
  
  const previousIndex = button.hasAttribute('currentIndex') ? parseInt(button.getAttribute('currentIndex'),10) : -1;
  
  const currentIndex = previousIndex >= artists.length - 1 ? 0 : previousIndex + 1;
  
  button.setAttribute('currentIndex', currentIndex);
  
  let para = document.querySelector('p');
  para.textContent = info + artists[currentIndex];
}

window.addEventListener('load', setup);
<button id="myArtists"> Click To Find Out!</button>
<p> </p>

Upvotes: 0

Etsh
Etsh

Reputation: 166

Your problem is not looping, it is that you do not want a loop. You just need a variable as a pointer to go through your array as such.

  let para = document.querySelector('p');

  const artists = ['Atif Aslam', 'Nusrat Fateh Ali Khan', 'Kendrick Lamar', 'Travis Scot', 'JCole', 'Sidhu', 'Ataullah EsaKheilvi'];
  let info = 'One of my top favorite artist is '

  //Array pointer
  let counter = 0;
  function myArt() {
    para.textContent = info + artists[counter++];
    if (counter == artists.length) {
      //Rest pointer
      counter = 0
    }
  }

Upvotes: 0

Bren
Bren

Reputation: 615

You don't need a loop for what you're trying to do. Instead, you want to keep track of an index for the artist and increment the index every time myArt() is called.

let para = document.querySelector('p');

const artists = ['Atif Aslam', 'Nusrat Fateh Ali Khan', 'Kendrick Lamar', 'Travis Scot', 'JCole', 'Sidhu', 'Ataullah EsaKheilvi'];

const info = 'One of my top favorite artist is ';

let artistIndex = 0;

function myArt() {
  if(artistIndex < artists.length) {
    para.innerText = info + artists[artistIndex];
    artistIndex++;
  }
}
<button id="myArtists" onclick="myArt()"> Click To Find Out!</button>
<p></p>

Upvotes: 1

Related Questions