Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140734

Javascript - printing out variables & objects to HTML

$
0
0

So I'm trying to create an online shop using HTML and Javascript as an exercise. I'm currently working on a dropdown menu which allows me to select the category of the item I wish to shop for (etc. electronics, clothes) but I'm having trouble getting all these values related to the category to show up.

So for example, I have a part of a javascript file below. The line div.innerHTML = (electronics.store) lets me print out the electronics store name "Mike's Computers" to the HTML file on my browser but I'm not quite sure how to access all the objects under its inventory. Is there a way to possibly iterate through the whole electronics inventory and print out each of the items and its cost/information below it and such?

If not, how would I go about printing things like the laptop brand name? Would it just be div.innerHTML = (electronics.inventory[0].brand) to print out the word "iMac"? I'm very confused and would appreciate any help possible.

Ultimately, I'd want my information to show up on the HTML page like:

Mike's Computers

Laptops

iMac $2000

Dell $600

Computers

Windows PC $1300

and so on.

function showOptions(){
    let userPicked = document.getElementById("list").value;
    var div = document.getElementById("div");
    if(userPicked == 'one'){
        div.innerHTML = (electronics.store);
    }else{
        alert("You must select a store.");
    }
}

let electronics = {
    store: "Mike's Computers",
    inventory: {
        "Laptops": {
            0: {
                brand: "iMac",
                cost: 2000
            },
            1: { 
                brand: "Dell",
                cost: 600
            }
        },
        "Computers": {
            2: {
                brand: "Windows PC",
                cost: 1300
            }
        }
    }
};

Viewing all articles
Browse latest Browse all 140734

Latest Images

Trending Articles



Latest Images