So I'm trying to print out each category of items that my store object sells to an HTML file in Javascript. When I attempted to do so below, it doesn't seem to print anything and I was wondering if someone could tell me what I'm doing wrong.
I want it to print out:
Ice cream
Cake
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;
}
}
also my html file:
<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
returns an array. You can iterate the array to build a new string, or simply join it:
categories += options.join('<br>')
EDIT: There are a few errors in your code that are preventing this from working:
onclick="showCategories()"
userPicked === 'one'
, or change the Desserts option value to <option value="dessert">Desserts</option>
You can add an event listener to your dropdown options and filter your menu options with the selected value. Then, it's just a matter of building up your elements and appending them to the list.
const dessert = { store: "Baskin Robbins", inventory: { "Ice cream": { 0: { flavor: "Chocolate", cost: 15 }, 1: { flavor: "Vanilla", cost: 10 } }, "Cake": { 2: { flavor: "Oreo", cost: 30 } } } }; const ddl = document.getElementById('ddl'); ddl.addEventListener('change', e => { const itemsList = document.getElementById('items'); itemsList.innerHTML = ''; const options = dessert.inventory[e.target.value]; for (const key in options) { const flavor = options[key].flavor; const div = document.createElement('div'); div.innerText = flavor; itemsList.append(div); } });
<select id="ddl"> <option>Select...</option> <option value="Ice cream">Ice Cream</option> <option value="Cake">Cake</option> </select> <div id="items"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.