Java Script objects

by Shoaib Chikate

HTML

<div id="clickMe" class="button leave-space" onclick="displayDetails()">Show</div>    
<div id="detailsDiv" class="details leave-space" style="display:none"><div>

CSS

.button{
    background:grey;
    text-align:center;
    border-radius:6px 6px 0 0;
    color:#fff;
}

.details{
    border-radius:0 0 6px 6px;
    background:green;
    color:#fff;
}

.leave-space{
    padding:7px;
}

JavaScript

var mother=undefined;
function displayDetails(){
    var detailsDiv=document.getElementById('detailsDiv');
    var toggleButton=document.getElementById('clickMe');
    if(mother==undefined){
    mother=new Object();
    mother.name="Munira";
    mother['age']=42;
    mother['height']=5.5;
   
    var text="Details of mother as follows<br>"+
        "Name :"+mother.name+"<br>"+
        "Age :"+mother.age+" years<br>"+
        "Height :"+mother.height+" inches<br>";
            
        detailsDiv.innerHTML=text+"<br>"+showProps(mother,"Mother")+
            "<br>"+listAllProperties(mother);
    }
    if(detailsDiv.style.display=="none"){
        detailsDiv.style.display="block";
        toggleButton.innerHTML="Hide";
    }else{
        detailsDiv.style.display="none";
        toggleButton.innerHTML="Show";
    }
}

function showProps(obj, objName) {
  var result = "";
  for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
        
        result += objName + "." + i + " = " + obj[i] + "\n";
    }
  }
  return result;
}


function listAllProperties(o){     
	var objectToInspect;     
	var result = [];
	
	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){  
		result = result.concat(Object.getOwnPropertyNames(objectToInspect));  
	}
   	return result; 
}