На вопросы обработчика события click
У меня возникли проблемы с небольшим количеством кода. Я пытаюсь получить информацию для отображения на странице с информацией, которая хранится в объектах. Мне нужно создать событие onclick в JS, а не в 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>
1 ответ
В вашем скрипте есть некоторые ошибки. Не могли бы вы сначала починить их и показать нам исправленный?
Ошибка 1: Uncaught ReferenceError: cas не определено: строка 14
console.log(cas); // Error
console.log(cars); // Correct
Ошибка 2: Uncaught ReferenceError: рейтинги не определены: строка 38
function Object(name,street,city,state,rating,phone){ // Error
function Object(name,street,city,state,ratings,phone){ // Correct
Ошибка 3: Uncaught ReferenceError: студенты не определены: строка 59
// There was no `students` variable defined in your script.
// Please fix this error.
Кроме того, вы не должны использовать имя Object для имени функции или имени переменной, потому что это зарезервированное слово.
Осталась еще одна ошибка.
Ошибка 1: Uncaught ReferenceError: Автомобиль не определен: строка 42
function Object(name,street,city,state,rating,phone){
function Car(name,street,city,state,rating,phone){
Далее вы должны определить, какой тип данных использовать для автомобилей; простой экземпляр объекта или автомобиля. Ваш текущий код смешал их. В противном случае, трудно повторить cars показать свою собственность.
[
Object/* ford */,
Object/* honda */,
Car/* Toyota */
]
Если вы хотите использовать экземпляр автомобиля, вы должны инициализировать 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')
];
Или, если вы хотите использовать простой объект, пожалуйста, нажмите новую запись, как показано ниже.
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}]