Question

我遇到一些代码时出现问题，我试图将信息显示在包含存储在对象中的信息的页面上。我需要在按钮上创建一个onclick事件在JS而不是HTML ，当点击时调用一个显示存储在我的对象数组中的信息的函数当他们点击所有学生时，我需要禁用按钮。

我遇到的具体问题是显示第二个对象集。它直接跳到第三个，我想知道如何解决这个问题是我的代码

我还需要创建一个平均汽车等级的功能，以平均等级显示：

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>

Answer 1

您的脚本中存在一些错误。你能先修好它们，然后让我们看一下固定的吗？

错误1：未捕获的ReferenceError：未定义cas：第14行

console.log(cas); // Error
console.log(cars); // Correct

错误2：未捕获的ReferenceError：未定义评级：第38行

function Object(name,street,city,state,rating,phone){ // Error
function Object(name,street,city,state,ratings,phone){ // Correct

错误3：未捕获的ReferenceError：未定义学生：第59行

// There was no `students` variable defined in your script.
// Please fix this error.

此外，您不应将名称Object用于函数名称或变量名称，因为它是保留字。

还剩下一个错误。

错误1：未捕获的ReferenceError：未定义Car：第42行

function Object(name,street,city,state,rating,phone){
function Car(name,street,city,state,rating,phone){

接下来，您必须确定要用于汽车的数据类型;简单的对象或汽车实例。您当前的代码混合了它们。否则，很难迭代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')
];

或者，如果您想使用简单的对象，请按下面的新条目。

cars[2] = { name: 'honda', address:{street:'12 Wyatt',city:'Heron', state:'MT'}, rating:[3.5, 2.4, 3.6],phone: '000-867-5309'}

转换数组＆lt; Object＆gt;到Array＆lt; Car＆gt;

// 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}]

点击事件处理程序问题

1 个答案: