I want to make each of my individual arrays correspond to an image-CodePudding

I am trying to create a "Food Selector" project and I'm a little stumped. I want to add a little more style with each individual array elements. I don't want to replace my array elements with the image. Maybe just add an event listener that will upload an image simultaneously with the element. When the button is clicked it will show the array words, but also show a image of my choosing at the bottom of the screen

I've tried a couple things, but my last attempt was trying to target the array index and make it equal the CSS/Style that I want it to correspond with.. And that came to no avail ;-;

let close = ["Chipotle", "Wendy's", "Pollo Tropical", "Wings and Things", "Subway", "Sonic's", "Culvers", "Publix", "Chic Fil A"];
let healthy = ["Chipotle", "Subway", "Chic Fil A", "Smoothie"];
let dine = ["LongHorn", "Hooters", "Cheddars", "Senju Ramen"];

// chip.addEventListener('change', () => {
//     if()
// })

// close[1] = document.querySelector(".wendys");

CodePudding user response：

Why not use an array of objects ? each element in the array is an object with the name and the image:

let close = [
{ name: "Chipotle", image: "" },
{ name: "Wendy's", image: "" },
// rest of your array here
];
close[0].name; // return "Chipotle" ;

CodePudding user response：

const close = [{ "Chipotle", image: null }, { name: "Wendy's", image: null }]

close[0].name // Return "Chipotle"
close[0].image // Access image return null