Javascript API显示的是[object，object]，而不仅仅是事实文本

我正在创建一个随机的cat事实应用程序，当你点击图片时，它会生成一个cat事实。我试图从API中获取随机的cat事实，但当我这样做时，它会在我的div中显示为[object，object]。我是一个初学者编码器，希望在API处理方面得到一些帮助。

这是我的js代码

consturl=”https://catfact.ninja/fact";
异步函数getAPI（url）{
const response=等待获取（url）；
让data=wait response.json（）；
控制台日志（数据）；
showFact（数据）；
}
getAPI（url）；
函数showFact（数据）{
document.getElementById（“事实”）.innerHTML=“”+数据+”；
}

。事实{
宽度：600px；
边框：1px纯黑；
字体大小：20px；
文本对齐：居中；
保证金：0自动；
边缘顶部：50px；
填充：20px；
}
#标志{
高度：300px；
宽度：400px；
保证金：0自动；
边缘顶部：50px；
显示：块；
}
h1，h2{
保证金：0自动；
边缘顶部：50px；
文本对齐：居中；
}

随机猫的事实！
随机猫的事实
点击猫咪查看随机事实！

总之，只需在

showFact

函数中将

data

替换为

data.fact

document.getElementById（“事实”）.innerHTML=“”+data.fact+”

具体来说,

在计算
“”+data+“”
时，js编译器调用
data.toString（）
函数将对象
数据
附加到字符串中。请注意，
+
运算符只能将字符串附加到字符串。只要API响应中的
数据
对象包含字符串类型的元素
事实
，就应该在此函数中指向要追加的元素

function showFact(data){
    document.getElementById("fact").innerHTML = "<b>" + data + "</b>";
}

我删除了“java”标记——java和javascript就像火腿和仓鼠一样相关。（如中所示，它们是两个完全不同的东西）。哇，这是一个如此简单的修复！非常感谢。刚刚更新了我的答案，使之更加具体。希望你至少学到了一些东西。
function showFact(data){
    document.getElementById("fact").innerHTML = "<b>" + data.fact + "</b>";
}