Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Need help with DOM, adding array of objects one at a time to html

    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.

    [CODE]

    (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;
    }

    }
    })();

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,289
    Thanks
    12
    Thanked 345 Times in 341 Posts
    Code:
    bigImage.innerHTML=students.nextSibling;
    should throw an error (nextSibling is a DOM property, not an Array property). try Array’s shift() method instead.

    additionally, .innerHTML expects a string (of HTML source code) to be given, not an object. objects will call their .toString() method instead (which in your case should return [object Object]).
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •