i need to have my onclick event display multiple things

StackOverflow https://stackoverflow.com/questions/21370324

Pergunta

I am wondering how can I have my onclick event display multiple this. I want to to be so that once I click on the button, it display new student info each time i click on it. I will only have 3 students info to display. Below is my javascript code and the html that it is linked to. Any help would be great. Right now my onclick event only display one students info.

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

    var studentInfo=[{name1: 'Sabrina Hill', 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]}];

    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]);

    function displayInfo(){
    document.getElementById('name').innerHTML='Name: '+ (studentInfo[0].name1);
    document.getElementById('address').innerHTML='Address: '+(studentInfo[0].address1.address1+ ' '+studentInfo[0].address1.city1+' '+studentInfo[0].address1.state1);
    document.getElementById('gpa').innerHTML='GPA: '+studentInfo[0].gpa1[0]+' ,'+studentInfo[0].gpa1[1]+' ,'+studentInfo[0].gpa1[2];
    }



    document.getElementById('info_btn').onclick = function(){
        displayInfo()

    };


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


    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]);

    function modifyStudent(studentObj,name,address,city,state,gpa){
        studentObj.name=name;
        studentObj.address = {
            address:address,
            city:city,
            state:state
        };
        studentObj.gpa = gpa;
    }
    var newStudentInfo = [{
        name:"Test",
        address:{
            address:"No where",
            city:"Chicago",
            state:"IL",
        },
        gpa:[]
    }];
    modifyStudent(newStudentInfo[0],'Super Man', '123 Test Dr', 'Orlando', 'Florida', [3.2, 4.0, 2.2]);
    console.log('Name:',newStudentInfo[0].name);
    console.log('Address:',newStudentInfo[0].address.address,newStudentInfo[0].address.city,newStudentInfo[0].address.state);
    console.log('GPA:',newStudentInfo[0].gpa);





})();

Here is the HTML it is linked to :

<!doctype html>  

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

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

    <title>Students 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>
Foi útil?

Solução

LIVE DEMO

(function(){

  var c = 0; // "current" Array index pointer

  var studentInfo=[
      {
        name: 'Sabrina Hill',
        address:{street:'172 Brushcreek Dr',city:'Sanford',state:'FL'},
        gpa:[3.2,3.7,4.0]
      },{
        name: 'JoelOsteen',
        address:{street:'3226 Lilac Dr', city:'Portsmouth',state:'VA'},
        gpa:[3.0,2.7,2.0]
      }
  ];


  function el(id){ return document.querySelector(id); } 

  function displayInfo(){
    var st = studentInfo[c];
    el('#name').innerHTML = 'Name: '+ (st.name);
    el('#address').innerHTML = 'Address: '+(st.address.street+' '+st.address.city+' '+st.address.state);
    el('#gpa').innerHTML='GPA: '+st.gpa[0]+' ,'+st.gpa[1]+' ,'+st.gpa[2];
  }

  el('#info_btn').addEventListener('click', function(){
    displayInfo();
    c = ++c % studentInfo.length; // Increase Array pointer and loop
  }, false); 


})();

Explanation

Important note: look at the changes I did to your studentInfo property names. I removed the unnecessary numbers at the end of each.

Set a variable c (current array index pointer) After every button click, get the values from your current object and increase the current value. Also using the Reminder Operator (%) make sure to loop the pointer value back to 0 if exceeded.

The interesting part is the variable var st = studentInfo[c]; inside the function displayInfo() that takes out of the students object the needed Student array index.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top