1
Мне интересно, как я могу отображать это событие onclick несколько раз. Я хочу быть таким, чтобы как только я нажму кнопку, он отображает новую информацию о студенте каждый раз, когда я нажимаю на нее. У меня будет всего 3 информации о студентах. Ниже приведен код javascript и html, с которым он связан. Любая помощь будет большой. Сейчас мое событие onclick отображает только одну информацию о студентах.Мне нужно, чтобы мое событие onclick отображало несколько вещей.
(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);
})();
Вот это HTML он связан с:
<!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>
Открыт для использования jQuery ...? –
@NicholasHazelsure почему бы и нет – user3238655