Question

What I am trying to do is figure out how would I create a function call that passes arguments for an object. In my code below I have created an array of object. I simply want to figure out how to create a function call that passes arguments for a new object. The arguments being passed would be the same data items in the already existing objects. Here is my code:

(function(){
    console.log('******Objects of Student Information Below!******');
//Student Information in An Object

var studentInfo=[{name1: 'SabrinaHill', address1:{address1:'172 Brushcreek Dr', city1:'Sanford',state1:'FL'},gpa1:[3.2,3.7,4.0]},{name2: 'JoelOsteen', address2:{address2:'3226 Lilac Dr', city2:'Portsmouth',state2:'VA'},gpa2:[3.0,2.7,2.0]},{name3: 'JoelOsteen', address3:{address3:'3226 Lilac Dr', city3:'Portsmouth',state3:'VA'},gpa3:[3.0,2.7,2.0]}];

console.log('Name:',studentInfo[0].name1);
console.log('Address:',studentInfo[0].address1.address1,studentInfo[0].address1.city1,studentInfo[0].address1.state1);
console.log('GPA:',studentInfo[0].gpa1[0]+',',studentInfo[0].gpa1[1]+',',studentInfo[0].gpa1[2]);

console.log('Name:',studentInfo[1].name2);
console.log('Address:',studentInfo[1].address2.address2,studentInfo[1].address2.city2,studentInfo[1].address2.state2);
console.log('GPA:',studentInfo[1].gpa2[1]+',',studentInfo[1].gpa2[1]+',',studentInfo[1].gpa2[1]);

console.log('******Added Information******');

var args = ('super man', '123 Test Dr', 'Orlando', 'Florida' [3.2, 4.0, 2.2]);

console.log('Name:',studentInfo[0].name1);
console.log('Address:',studentInfo[0].address1.address1,studentInfo[0].address1.city1,studentInfo[0].address1.state1);
console.log('GPA:',studentInfo[0].gpa1[0]+',',studentInfo[0].gpa1[1]+',',studentInfo[0].gpa1[2]);

console.log('Name:',studentInfo[1].name2);
console.log('Address:',studentInfo[1].address2.address2,studentInfo[1].address2.city2,studentInfo[1].address2.state2);
console.log('GPA:',studentInfo[1].gpa2[1]+',',studentInfo[1].gpa2[1]+',',studentInfo[1].gpa2[1]);



})();

I am trying to have the console display the new information added by using a function. Any help would be appreciated.

Thanks


I also am searching for help on how to create an onclick event on a button which, when clicked calls a function that uses JavaScript’s innerHTML property to display ALL object data (one student at a time) in the HTML box for the site.

Below is my HTML:

<!doctype html>  

<html lang="en">
<head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Student Info</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

<div id="form_box">
    <div id="contact-form">
        <p class="heading">Display Students Information Below:</p>
        <div id="form-box">                     

                <div id="output">
                    <div id="name">
                        <p></p>
                    </div>
                    <div id="address">
                        <p></p>
                    </div>
                    <div id="gpa">
                        <p></p>
                    </div>
                    <div id="date">
                        <p></p>
                    </div>
                    <div id="gpaavg">
                        <p></p>
                    </div>
                    <div id="phone">
                        <p></p>
                    </div>
                    <!-- <div class="clear"></div> -->
                </div>

                <div id="info_box">
                    <div id="info_btn">
                        <h4 id="round" class="heading">Click To See Next Student</h4>
                        <a href="#" class="buttonred">Next</a>
                    </div>
                </div>
        </div>        
        <div class="clear"></div>
    </div>
</div>

<script type="text/javascript" src="js/main.js"></script>

</body>
</html>
Was it helpful?

Solution

Take the numbering off the property names, eg name1 should just be name etc Then make a function like below:

function modifyStudent(studentObj,name,address,city,state,gpa){
   studentObj.name=name;
   studentObj.address = {
         address:address, 
         city:city,
         state:state
   };
   studentObj.gpa = gpa;
}

then call the function with the student object and the arguments for name address etc

var studentInfo = [{
  name:"Test",
  address:{
     address:"No where",
     city:"Chicago",
     state:"IL",
  },
  gpa:[]
}];
modifyStudent(studentInfo[0],'super man', '123 Test Dr', 'Orlando', 'Florida', [3.2, 4.0, 2.2]);
console.log(studentInfo[0]);

Since javascript is pass by reference for objects and arrays, when the function modify's the objects properties those changes will be visible when the studentInfo[0] object is used after it.

Or you could make a student object that has a method to modify the student data

function student(){
  this.name="";
  this.address={address:"",city:"",state:""};
  this.gpa=[];

  this.modifyStudent(name,address,city,state,gpa){
       this.name=name;
       this.address = {
             address:address, 
             city:city,
             state:state
       };
       this.gpa = gpa;
  };
}

var studentInfo= [new student(),new student()];
console.log(studentInfo[0]);
studentInfo[0].modifyStudent('super man', '123 Test Dr', 'Orlando', 'Florida', [3.2, 4.0, 2.2]);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top