Hello,

I am working on a project. I have an array of objects, which I want to display in an html page that runs after a button is clicked.

I have the event and listener on the button but I'm not sure how to make the objects go to the html, their are three and I need them to go in one at a time. So user presses the button and it displays the first object, after button is clicked again the second object displays, and so on.. Can I get some assistance please? Below is the code I am working on and need help on.

(function(){


//---------array of 2 objects---------
var students =[
student1 ={name:'JeremyS',address:{street:'108 Roberts Dr',city:'Shelbyville',state:'Tennessee'},GPA:[3.1,3.1,4.0]},
student2 ={name:'AdamWest',address:{street:'1722 Genesee Troy Rd',city:'Moscow',state:'Idaho'},GPA:[3.7,2.3,2.5]},
];
//---------third object for array---------
var student3 = {name:'Angel Feliciano',address:{street:'8 Houston Ave',city:'Middletown',state:'New York',},GPA:[3.7,3.8,4.0]};
//-----.push()method to add student3 to array--------
students.push(student3);
//---console.log students, worked correctley.---.... YAY!! this was tough!
console.log(students);
//---Created a var for the red button----
var bttn = document.querySelectorAll('#info_btn a');
//---console.log checked out
console.log(bttn);

for(var i = 0, max = bttn.length; i<max; i++){
console.log(bttn[i]);

bttn[i].onclick = function(e){

var bigImage = document.querySelector('#output');
bigImage.innerHTML=students.nextSibling;
console.log(e);
e.preventDefault;
return false;
}

}
})();