CODEWITHSUNDEEP
javascriptarrays
Rickie Knight
Rickie Knight

Reputation: 29

Need help displaying array items in a slideshow fashion

Copy of my html/css and javascript. Stackoverflow wants me to add more information but I figure the title was pretty self explanatory (not to sound like a d**k). I want to display each Barbers name and their social media info in a slideshow fashion. I want the barbers name and information will change every 4 seconds. I don't just want the answer I want to know what I did wrong so I don't repeat this mistake in the future. Thank you. :)

function showinfo(){
    var barbername = ['Brian', 'Dwight', 'Greg','Josh','Tino'];
    var barberinfo = ['BarberPro','','Sunnti_TSN', '', 'ClipperDreams'];

    var bnameholder = document.getElementById('barbernamesm');
    var binfoholder = document.getElementById('barberinfosm');

    for (i = 0; i < barbername.length; i++){
        var currentname = barbername[i];
        var currentinfo = barberinfo[i];
    }

        bnameholder.innerText(currentname);
        binfoholder.innerText(currentinfo);

        setTimeout(showinfo, 4000);
    }

    showinfo();

Upvotes: 0

Views: 27

Answers (1)

Ori Drori
Ori Drori

Reputation: 192242

There were several problems, but the main issue is - you need to increment i once for each showInfo() call.

In addition, instead of having two arrays, consider one array with objects that contain the name and the info for each barber - [{ name: 'Brian', info: 'BarberPro' }, ...].

var i = 0; // should be available to all runs of showinfo()
var barbername = ['Brian', 'Dwight', 'Greg', 'Josh', 'Tino']; // declare once
var barberinfo = ['BarberPro', '', 'Sunnti_TSN', '', 'ClipperDreams']; // declare once
var bnameholder = document.getElementById('barbernamesm'); // get and cache once
var binfoholder = document.getElementById('barberinfosm'); // get and cache once

function showinfo() {
  var currentname = barbername[i];
  var currentinfo = barberinfo[i]; 

  bnameholder.innerText = currentname; // innerText is a property and not a function
  binfoholder.innerText = currentinfo; // innerText is a property and not a function
  
  i = (i + 1)  % barbername.length; // increment i in cycle of 0-3

  setTimeout(showinfo, 1000);
}

showinfo();
<div id="barbernamesm"></div>
<div id="barberinfosm"></div>

Upvotes: 2

Related Questions