Javascript OOP issue

Question

Вот моя проблема. Я создал флажок, который, если он не установлен, отображает предупреждение («Не проверено»), и если это поле чечке, чтобы показать информацию для человека. Проблема в том, что я не знаю, как получить доступ к массиву автомобилей []. Он показывает [объект Object] вместо марки и года автомобиля.

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, 
     } 

нет , до закрытия } поэтому старайтесь избегать его.