for loop only displays one item and the last item in the array object

Question

I have a for loop that loops through this array object. However there are a few things I am unsure of and do not understand. The first issue is that why is the loop only displaying one item from the array and not all of them? The other issue is that it is only displaying the last item from the array? I imagined it would display the first item but that is not the case. Any explanation to these issues is appreciated, thanks!

Javascript:

const rosterItems = [
  {
    img: '<img src="images/bryce.jpg" class="artist-image" alt="#">',
    resident: '<p>Resident: Bryce Methven</p>',
    bio: '<p>' +
         'Lorem ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         'Lorem ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         '</p>'
  },
  {
    img: '<img src="images/haptic.jpg" class="artist-image" alt="#">',
    resident: '<p>Resident: Haptic</p>',
    bio: '<p>' +
         'Haptic ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         '</p>'
  },
  {
    img: '<img src="images/haptic.jpg" class="artist-image" alt="#">',
    resident: '<p>Resident: DJ Test</p>',
    bio: '<p>' +
         'Haptic ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         '</p>'
  }
]

const rosterArtist = document.querySelector(".artist")
const rosterBio = document.querySelector(".bio")

for (let i = 0; i < rosterItems.length; i++) {

  let leftCol = `<div class="item">
                  ${rosterItems[i].img}
                  ${rosterItems[i].resident}
                  </div>`

  let rightCol = rosterItems[i].bio
    
  rosterArtist.innerHTML = leftCol
  rosterBio.innerHTML = rightCol

}

Html:

<div class="roster-gallery">
    <div class="artist">
    </div>
    <div class="artist-bio">
         <div class="bio">
         </div>
         <div class="pagination">
              <button class="previous">Previous</button>
              <button class="next">Next</button>
         </div>
     </div>
</div>

Answer 1

Your Html should be (you missed the event and for loop wont work for you)

<div class="roster-gallery">
<div class="artist">
</div>
<div class="artist-bio">
     <div class="bio">
     </div>
     <div class="pagination">
          <button class="previous" onclick="previous()">Previous</button>
          <button class="next"  onclick="next()">Next</button>
     </div>
 </div>

and your javascript should be

    const rosterItems = [
  {
    img: '<img src="images/bryce.jpg" class="artist-image" alt="#">',
    resident: '<p>Resident: Bryce Methven</p>',
    bio: '<p>' +
         'Lorem ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         'Lorem ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         '</p>'
  },
  {
    img: '<img src="images/haptic.jpg" class="artist-image" alt="#">',
    resident: '<p>Resident: Haptic</p>',
    bio: '<p>' +
         'Haptic ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         '</p>'
  },
  {
    img: '<img src="images/haptic.jpg" class="artist-image" alt="#">',
    resident: '<p>Resident: DJ Test</p>',
    bio: '<p>' +
         'Haptic ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         '</p>'
  }
]

const rosterArtist = document.querySelector(".artist")
const rosterBio = document.querySelector(".bio")

const maxPos = rosterItems.length;
let currentPos = 0; 

function previous(){
    if(currentPos>0){
    currentPos-=1;
  }
  showData();
}
function next(){
    if(currentPos<maxPos){
    currentPos+=1;
  }
  showData();
}
showData();
function showData(){
let leftCol = `<div class="item">
                  ${rosterItems[currentPos].img}
                  ${rosterItems[currentPos].resident}
                  </div>`

  let rightCol = rosterItems[currentPos].bio
    
  rosterArtist.innerHTML = leftCol
  rosterBio.innerHTML = rightCol
}