My apologies if my explanation is unclear or if the code seems complicated, I'm still in the learning process. I am attempting to showcase data that is stored in an array. The objective is to have this data displayed upon clicking a button and then show the information from the next index in the array upon subsequent clicks.
I require assistance in creating a function that can progress to the following index of the array. Thank you!
(function(){
var students = [ //array holding information
{name: 'john',
address: {
address: '821 Imaginary St',
city: 'Chicago',
state: 'Il'},
gpa: [4.0, 3.5, 3.8]},
{name: 'jim',
address: {
address: '127 fake Rd',
city: 'Orlando',
state: 'Fl'},
gpa: [2.5, 3.3, 3.6]}];
var redBut = document.querySelector('.buttonred');
redBut.onclick = getInfo;
var count = 0;
function getInfo(){
var stn = students[0];
if (count < 3){
count++;
document.getElementById('name').innerHTML = 'Name: ' + stn.name; //data to be displayed on button click
document.getElementById('address').innerHTML = 'Address: ' + stn.address.address + " " + stn.address.city + ", " + stn.address.state;
document.getElementById('gpa').innerHTML = 'GPA: ' + stn.gpa[0] +", " + stn.gpa[1] + ", " + stn.gpa[2];
document.getElementById('date').innerHTML = 'Date: ' + d.toLocaleDateString();
document.getElementById('gpaavg').innerHTML = 'Average GPA: ' + gpas;
}
}