Javascript OOP問題

Question

這是我的問題。我創建了一個複選框，如果它沒有被選中，它會顯示一個提醒（'未選中'），如果該框被選中，則顯示該人的信息。問題是我不知道如何訪問cars []數組。它顯示[對象對象]而不是汽車的品牌和年份。

HTML：

<form name="myForm"> 
      <label for="person1">PersonOne</label> 
      <input type="checkbox" name="checkbox" id="person1"> 
</form> 
     <button id="moreInfo">CLICK</button> 
     <div id="info"></div> 

JS：

document.addEventListener("DOMContentLoaded",function(){ 


    var info = document.getElementById('info'); 

    var person1 = { 
     name:'Joro', 
     age:20, 
     cars: [ 
      { 
       brand:'BMW', 
       year:1998, 
      } , 
      { 
       brand:'Punto', 
       year:2000, 
      }   
     ], 
     fullName: function(){ 
      return 'Name: ' + this.name + ' ,, ' +'Age: ' + this.age; 
     } 
    } 

    document.getElementById('moreInfo').addEventListener('click',function(){ 
    if(document.myForm.checkbox.checked){ 
    info.innerHTML = person1.fullName() + person1.cars[1]; 
     } else{ 
      alert('not checked'); 
     } 

    }); 


}); 

Answer 1

 document.addEventListener("DOMContentLoaded",function(){ 
 

 

 
     var info = document.getElementById('info'); 
 

 
     var person1 = { 
 
      name:'Joro', 
 
      age:20, 
 
      cars: [ 
 
       { 
 
        brand:'BMW', 
 
        year:1998 
 
       } , 
 
       { 
 
        brand:'Punto', 
 
        year:2000 
 
       }   
 
      ], 
 
      fullName: function(){ 
 
       return 'Name: ' + this.name + ' ,, ' +'Age: ' + this.age; 
 
      }, 
 
      allCars : function(){ 
 
       var str=''; 
 
       
 
       this.cars.forEach(car=>{ 
 
        
 
        str += car.brand + ' ' + car.year+ '<br>'; 
 
      
 
       }); 
 
       return str; 
 
      } 
 
     } 
 

 
     document.getElementById('moreInfo').addEventListener('click',function(){ 
 
     if(document.myForm.checkbox.checked){ 
 
     info.innerHTML = person1.fullName() + person1.cars[1].brand; 
 
      info.innerHTML+='<br>allCars: ' + person1.allCars(); 
 
      } else{ 
 
       alert('not checked'); 
 
      } 
 

 
     }); 
 

 

 
    });

<form name="myForm"> 
 
       <label for="person1">PersonOne</label> 
 
       <input type="checkbox" name="checkbox" id="person1"> 
 
    </form> 
 
      <button id="moreInfo">CLICK</button> 
 
      <div id="info"></div>

你必須使用

person1.cars[1].brand 

或

person1.cars[1].year 

採取在對象

Answer 2

線person1.cars[1]的這一部分試圖內部car對象轉換爲字符串日提交。爲了得到所需要的對象屬性使用點.或支架[]符號：

info.innerHTML = person1.fullName() + "," + person1.cars[1].brand + "," + person1.cars[1].year; 

或

info.innerHTML = person1.fullName() + "," + person1.cars[1].['brand'] + "," + person1.cars[1].['year']; 

---

問法（返回所有汽車人有）：

... 
fullName: function(){ 
    return 'Name: ' + this.name + ' ,, ' +'Age: ' + this.age; 
}, 
getAllCars: function(){ 
    var person_cars = "Cars: "; 
    this.cars.forEach(function(car){ 
     person_cars += car.brand + "," + car.year + "; "; 
    }); 
    return person_cars; 
} 
... 

Answer 3

在Json格式中，這是無效的：

 { 
      brand:'BMW', 
      year:1998, 
     } , 
     { 
      brand:'Punto', 
      year:2000, 
     } 

否,之前關閉}所以儘量避免它。