How to print object values correctly to a DIV using innerHTML?
<p>I'm doing a course at Codecademy and many of their beginner courses use the console.log() command to print to the console. I however would like to try using <strong>document.GetElementById(</strong>) and <strong>innerHTML</strong> but it instead of printing out the details of the chosen object, it just prints "[object Object]", whereas console.log() prints the details of the key?</p>

<p>Here is my code:</p>

<pre><code>&lt;div id="myfrndDetails"&gt;&lt;/div&gt;

&lt;script&gt;
var frnds = new Object();
frnds.bill = {
    firstName: "Bill",
    lastName: "Gates",
    phoneNumber: "8778787"
}

frnds.steve = {
    firstName: "Bill",
    lastName: "Gates",
    phoneNumber: "8778787"
}


var frndCard = function(frndName,frndLst) {
    for (var onefrnd in frndLst) {
        if (frndLst[onefrnd].firstName === frndName) {
            document.getElementById("myfrndDetails").innerHTML = frndLst[onefrnd];
            return frndLst[onefrnd];
        }
    }
};

frndCard("Bill",frnds);

&lt;/script&gt;
</code></pre>