【发布时间】：2015-12-13 00:41:57
【问题描述】：
我在处理一些代码时遇到问题，我正在尝试获取信息以显示在页面上，其中包含存储在对象中的信息。我需要在按钮上创建一个 onclick 事件 in JS not HTML，单击该按钮时会调用一个函数，该函数显示存储在我的对象数组中的信息 此外，当他们点击所有学生时，我需要禁用该按钮。
我遇到的具体问题是显示第二个对象集。它直接跳到第三个，我想知道下面是我的代码如何解决这个问题
我还需要创建一个平均汽车评级的函数，以显示在 Avg Rating 中：
var display = document.querySelectorAll('#output div');
var button = document.querySelector('.buttonred');
// There will be no more then 4 global variables.
//Create an array of objects containing 3 main properties (keys) and 3 sub properties.
var cars =[
{ name: 'ford', address:{street :'12 shoe st',city:'Candyland', state:'HI'}, rating:[4.0, 3.5, 4.0],phone: '555-555-5551'},
{ name: 'honda', address:{street:'45 wii ln',city:'Nashville', state:'TN'}, rating:[2.5, 3.5, 3.0],phone: '323-2343-1232'}
];
console.log(cars);
function showCars (cars){
for (var i = 0, j=cars.length; i < j; i++){
console.log('Name: '+ cars[i].name);
console.log('Address: '+ cars[i].address.street + ', ' + cars[i].address.city + ', ' + cars[i].address.state);
console.log('Rating: '+ cars[i].rating);
console.log('Phone: '+ cars[i].phone);
}
}
//run the function
showCars(cars);
// Add a new object to the array of objects above
function Car(name,street,city,state,rating,phone){
this.name=name;
this.address = {
street:street,
city:city,
state:state
};
this.rating = rating;
this.phone = phone;
}
//Add this new car
cars[2] = new Car('Toyota', '12 Wyatt', 'Heron', 'MT', [3.5, 2.4, 3.6],'000-867-5309');
//Console.log ALL the information in ALL objects on 3 lines.
console.log(cars);
showCars(cars);
//Create an onclick event on the ‘Next’ button which, when clicked calls a function
button.addEventListener("click", onPage, false);
//Show first
display[0].innerHTML ='Name: '+cars[0].name;
display[1].innerHTML ='Address: '+ cars[0].address.street + ', ' + cars[0].address.city + ', ' + cars[0].address.state;
display[2].innerHTML ='Rating: '+cars[0].rating;
display[4].innerHTML ='Avg rating: '+ 'function here';
display[5].innerHTML ='Phone: ' + cars[0].phone;
// display object data one at a time in the HTML
function onPage(){
for (var ii = 1, jj=cars.length; ii < jj; ii++) {
if (cars[ii] !== cars[2]) {
display[0].innerHTML = 'Name: ' + cars[ii].name;
display[1].innerHTML = 'Address: ' + cars[ii].address.street + ', ' + students[ii].address.city + ', ' + cars[ii].address.state;
display[2].innerHTML = 'Rating: ' + cars[ii].rating;
display[4].innerHTML = 'Avg Rating: ' + 'function here';
display[5].innerHTML = 'Phone: ' + cars[ii].phone;
} else {
display[0].innerHTML = 'Name: ' + cars[2].name;
display[1].innerHTML = 'Address: ' + cars[2].address.street + ', ' + cars[2].address.city + ', ' + cars[2].address.state;
display[2].innerHTML = 'Rating: ' + cars[2].rating;
display[3].innerHTML = 'Date: ' + date;
display[4].innerHTML = 'Avg rating: ' + 'function here';
display[5].innerHTML = 'Phone: ' + cars[2].phone;
button.removeEventListener("click", onPage, false);
button.innerHTML = "Done";
}
}
}//ends function
HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Car list</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 Car 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 Car</h4>
<a href="#" class="buttonred">Next</a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>
【问题讨论】：
标签： javascript function object average eventhandler