How to Source an Image from An Array of Image Sources?

This is my first attempt at creating and using an array.

Setup and goal:

I have an image element on my page, and I’d like to change the image source using a button. For the purposes of this post, I’ve simplified the code. I set a variable in place of using a button.

var items = [
    {image: "https://static.wixstatic.com/media/yadda01.jpg"}, // 0
    {image: "https://static.wixstatic.com/media/yadda01.jpg"}, // 1
    {image: "https://static.wixstatic.com/media/yadda01.jpg"}, // 2
    {image: "https://static.wixstatic.com/media/yadda01.jpg"}, // 3
    {image: "https://static.wixstatic.com/media/yadda01.jpg"}, // 4
    {image: "https://static.wixstatic.com/media/yadda01.jpg"}, // 5
    {image: "https://static.wixstatic.com/media/yadda01.jpg"}, // 6
];

$w.onReady(function () {
    let selection = 3;
    let whatImage = items[selection];
    $w("#image").src = whatImage;
});

This doesn’t seem to work, and I’m not sure why. Can anyone tell me what’s wrong here?

Thank so much.

It is not working because you have objects inside this array. So you would have to give the image property to the items [ selection ] you selected.

var items=[
{image:"https://static.wixstatic.com/media/yadda01.jpg"},// 0{image:"https://static.wixstatic.com/media/yadda01.jpg"},// 1{image:"https://static.wixstatic.com/media/yadda01.jpg"},// 2{image:"https://static.wixstatic.com/media/yadda01.jpg"},// 3{image:"https://static.wixstatic.com/media/yadda01.jpg"},// 4{image:"https://static.wixstatic.com/media/yadda01.jpg"},// 5{image:"https://static.wixstatic.com/media/yadda01.jpg"},// 6];

When you selected that array index, you selected an object. This object has a image property, just change that in your code.

let whatImage = items[selection].image

Oh, man!

If it were not so late, I’d knock it out. But I will try this first thing tomorrow.

Thank you.