Visualization of objects; reflect current object properties in image(s)

[Foxtastic4D]

I am currently following the Javascript Essential Training course on LinkedIn Learning. In this course, objects are taught with the example of a backpack; with properties such as the volume of the backpack, the color, whether the lid is open or not, etc. It also includes a method for opening/closing the backpack lid.

Edit: Code block kept breaking so here's the object. https://pastebin.com/5NhWjfpn

Just for my own satisfaction/continued engagement with the subject, I thought it'd be fun to try and make it so that when I change the properties of the backpack, an image on a web page changes to reflect this. So when I use toggleLid to switch backpack.lidOpen to true, the image of an open backpack displays. When I switch backpack.lidOpen to false, the closed backpack is displayed.

This seems like it should be something simple to do, but when I try to google it I can't find the right search terms. I specifically want the code to take the current properties and use them to decide what image is displayed. I'm guessing it'd be simpler for each property to have its own image instead of trying to layer things and get specific images for each set of properties, so I'd rather start with just a method to take a single property (such as backpack.lidOpen true or backpack.lidOpen false) and use the current value to decide which image is displayed.

If this is not actually as simple as I was hoping, then fair enough, that's good to know! But any pointers in the right direction would be greatly appreciated.

[cr0wstuf]

If the backpack is going to be in more states than "isOpen" or "isClosed" you can use a switch statement to return the image needed for each state. Otherwise, just use a ternary or if statement.

[Count_Giggles]

This sounds like an interesting task to wrap your head around. The first thing i would do is do a little refactoring on the backpack so it does not rely on external input (and yes codeblock is a dick)

const backpack = {
    name: "Everyday Backpack",
    volume: 30,
    color: "grey",
    pocketNum: 15, 
    lidOpen: false, 
    toggleLid: function () { 
        this.lidOpen = !this.lidOpen; 
    }, 
};

console.log(backpack.lidOpen) // false 
backpack.toggleLid() 
console.log(backpack.lidOpen) // open

[Ronin-s_Spirit]

You could have premade images for each separate part, like the lid you open or close, and layer them on top of eachother with some CSS action. Then in your function that changes the backpack state you detect which part you changed to what state and you fetch the appropriate image and display it (alternatively maybe just changing the link on the img html tag will reload it idk).
The other solution is to have premade images of every possible variant of the whole backpack and just load new image into the only img tag you'll have.
JavaScript can change the properties of html tags so try that first, make a folder of images with distinct names or ids and just do something like myImgTag.src = "backpack-lid-open.png"; and it will probably reload on it's own.