如何使用innerHTML将对象值正确打印到DIV?

2022-06-26 00:00:00 object key javascript html innerhtml

我正在Codecademy上学习一门课程,他们的许多初学者课程都使用console.log()命令来打印到控制台。但是,我想尝试使用Document.GetElementById()和innerHTML,但它不打印所选对象的详细信息,而只是打印"[Object Object]",而console.log()打印键的详细信息?

以下是我的代码:

<div id="myfrndDetails"></div>

<script>
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);

</script>

解决方案

但它没有打印出所选对象的详细信息,而是 只打印"[对象对象]",

这是因为frndLst[onefrnd]是一个对象,其toString方法将打印[object Object]

使用JSON.stringify(frndLst[onefrnd])查看此对象的JSON表示

或,替换此行

document.getElementById("myfrndDetails").innerHTML = frndLst[onefrnd];

document.getElementById("myfrndDetails").innerHTML = "lastname - " +  frndLst[onefrnd].lastName + " and phoneNumber " + frndLst[onefrnd].phoneNumber ;

相关文章