javascript - Javascript - 将对象键打印到 HTML
问题描述
因此,我试图将我的商店对象出售的每个类别的商品打印到 Javascript 中的 HTML 文件中。当我尝试在下面这样做时,它似乎没有打印任何东西,我想知道是否有人可以告诉我我做错了什么。
我希望它打印出来:
冰淇淋
蛋糕
let dessert = {
store: "Baskin Robbins",
inventory: {
"Ice cream": {
0: {
flavor: "Chocolate",
cost: 15
},
1: {
flavor: "Vanilla",
cost: 10
}
},
"Cake": {
2: {
flavor: "Oreo",
cost: 30
}
}
}
};
function showCategories(){
let userPicked = document.getElementById("list").value;
var div = document.getElementById("div");
if(userPicked == 'dessert'){
var categories = "Inventory";
categories += "<br>";
var options = Object.keys(dessert.inventory);
categories += options;
div.innerHTML = categories;
}
}
还有我的html文件:
<html>
<head>
<title>Welcome</title>
</head>
<body>
<div><h1>Welcome</h1></div><br />
<div class="dropdown">
<form>
<select name="list" id="list" accesskey="target">
<option value="none">Pick store</option>
<option value="one">Desserts</option>
</select>
<input type=button value="Select" onclick="showOptions()" onclick = "showCategories()"/>
</form>
</div>
</div>
<div id="div"></div>
<script src="store.js"></script>
</body>
</html>
解决方案
Object.keys
返回一个数组。您可以迭代数组以构建一个新字符串,或者简单地加入它:
categories += options.join('<br>')
编辑:您的代码中有一些错误阻止了它的工作:
- 您的按钮上只有一个 onclick 属性:
onclick="showCategories()"
- Desserts 的选项值需要与 showCategories 中的 if 语句相匹配。因此,要么将 if 条件更改为
userPicked === 'one'
,要么将 Desserts 选项值更改为<option value="dessert">Desserts</option>
推荐阅读
- php - 谷歌地图地理编码结果顺序
- ios - iOS Swift 4 打印
- string - 当提供的输入是字符串引用时,str::contains 不起作用
- java - 使用 Paths.get() 或 Path.resolve() 加入 nio.path
- apache-spark - Spark to_date 生成奇怪的 5 位数年份
- google-apps-script - 如何通过 Google Apps 脚本设置垂直轴标题?
- php - 使用 SQL Server 进行分页不会返回正确的结果
- c# - Razor动态表创建c#
- algorithm - 具有不同大小元素的数组的运行时间
- regex - 在 sql 查询字符串 python 3.x 上执行正则表达式搜索