点击事件处理程序问题
on click event handler questions
我在尝试获取信息以显示在包含存储在对象中的信息的页面上时遇到了一些代码问题。我需要在按钮上用JS而不是HTML创建一个onclick事件,当单击该按钮时,它会调用一个显示存储在我的对象数组中的信息的函数此外,当他们点击所有学生时,我需要禁用该按钮。
我遇到的具体问题是显示第二个对象集。它直接跳到第三个,我想知道如何解决这个问题。下面是我的代码
我还需要创建一个函数,平均汽车评级显示在平均评级:
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>
脚本中存在一些错误。你能先把它们修好,让我们看看修好的吗?
错误1:未捕获引用错误:未定义cas:第14行
console.log(cas); // Error
console.log(cars); // Correct
错误2:未捕获引用错误:未定义评级:第38行
function Object(name,street,city,state,rating,phone){ // Error
function Object(name,street,city,state,ratings,phone){ // Correct
错误3:未捕获引用错误:未定义学生:第59行
// There was no `students` variable defined in your script.
// Please fix this error.
此外,函数名或变量名不应使用名称Object
,因为它是一个保留字。
还有一个错误。
错误1:未捕获引用错误:未定义车辆:第42行
function Object(name,street,city,state,rating,phone){
function Car(name,street,city,state,rating,phone){
接下来,您必须确定用于汽车的数据类型;简单的Object或Car实例。您当前的代码混合了它们。否则,很难迭代cars
来显示其属性。
[
Object/* ford */,
Object/* honda */,
Car/* Toyota */
]
如果你想使用Car实例,你必须初始化cars
如下
var cars = [
new Car('ford', '12 shoe st', 'Candyland', 'HI', [4.0, 3.5, 4.0], '555-555-5551'),
new Car('honda', '45 wii ln', 'Nashville', 'TN', [2.5, 3.5, 3.0], '323-2343-1232')
];
或者,如果你想使用简单的Object,请像下面这样推送新条目。
cars[2] = { name: 'honda', address:{street:'12 Wyatt',city:'Heron', state:'MT'}, rating:[3.5, 2.4, 3.6],phone: '000-867-5309'}
转换数组<对象>到数组<汽车>
// cars = [{Object}, {Object}]
cars = cars.map(function(car) {
return new Car(car.name, car.address.street, car.address.city, car.address.state, car.rating, car.phone);
});
// cars = [{Car}, {Car}]
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 三星智能电视应用程序;Brightcove示例应用程序远程控制问题
- 在我的SPA应用程序中集成Facebook共享的问题
- 在AJAX回调和呈现PIXIJS之间处理程序流时遇到了问题
- 在循环中附加事件处理程序时出现浏览器性能问题
- node.js应用程序中的async.js问题
- React Rails应用程序中动态子项的密钥分配问题
- jQuery,引导程序下拉列表问题
- 引导程序导航栏崩溃问题
- jQuery使用.of()删除事件处理程序时出现的问题
- Selebyun爬网程序超时问题C#
- Angular 1.X,webpack和ngtemplate加载程序问题
- 在我的Rails应用程序中使用Stripe对卡充电时出现问题
- 离子框架移动应用程序性能问题
- 如何将 camanjs 用于我的 wix 应用程序绕过跨域问题
- 聊天应用程序的潜在问题
- Ruby on Rails 4:在 Rails Web 应用程序中添加 Javascript 文件时遇到问题
- MongoDB 2.0.0 驱动程序,按 ID 检索记录时出现问题
- 在 Chrome 扩展程序中将鼠标悬停在广告上使用时遇到问题
- 在Facebook应用程序中弹出时遇到问题