javascript - Prototype objects, and object arrays -

if title made no sense, let me elaborate.

i have 2 objects 1 called area , 1 called enemy.

each area has it's own enemies made enemy prototypes each area.

next did array.push(); function on each area prototype if user clicks button they'll shown list of "area's" can explore.

the main part gives me error if try function alert(areas[0].enemies[0].name);

how can use button display specific enemy name?

no jquery please

function area(name, enemies) {   this.name = name;   this.enemies = enemies; }  function enemy(name, type) {   this.name = name;   this.type = type; }  var cave = new area("cave", {   bat: new enemy("bat", "flying"),   snake: new enemy("snake", "ground"), });  var forest = new area("forest", {   bear: new enemy("bear", "animal"),   coyote: new enemy("coyote", "wolf"), });  areas = []; areas.push(cave, forest);  var thatbtn = document.getelementbyid('thatbtn'),     display = document.getelementbyid('display');  thatbtn.addeventlistener('click', function() {   (i = 0; < areas.length; i++) {     var li = document.createelement('li'),       libtn = document.createelement('button');     libtn.textcontent = areas[i].name;     li.appendchild(libtn);     display.appendchild(li);     libtn.addeventlistener('click', function() {       (j = 0; j < areas.length; j++) {         if (areas[j].name == event.target.textcontent) {           alert(areas[j].name);           (k = 0; k < object.keys(areas[j].enemies).length; k++) {             alert(areas[j].enemies[k].name);           }         }       }     });   } });  <button id="thatbtn">click here</button>   <ul id="display"> </ul> 

it gives error because areas[0].enemies not array -- it's object.

{     bat: new enemy("bat", "flying"),     snake: new enemy("snake", "ground"), } 

change to

for(var key in areas[j].enemies) {     alert(areas[j].enemies[key].name); }