Is There a More Efficient Way to Alter HTML Text with JavaScript-CodePudding

I am working on a building a website that has a drink menu. In this menu, there are 32 different menu options to select from. When the user clicks on a menu option, text above that menu item displays giving more information about the menu item, such as displaying the name, description, and cost of the drink, along with displaying a slideshow of three images related to the drink you selected. To update all of this information, I created a function for each of the drinks (when there were only 6 and I was testing). Although, given that there are 32 options, my method does not seem like a scalable solution to the problem. Is there a better way to go about doing this?

HTML:

<div >
        <!-- HOT DRINKS -->
        <div >
            <img src="images/menu-1.png" alt="Menu item - Espresso">
            <h4>Espresso (Hot)</h4>
            <p >$2.00 - $3.00</p>
            <a href="#"  onclick="changeTextMenu_One()">Learn More</a>
        </div>
        <div >
            <img src="images/menu-3.png" alt="Menu item - Cappuccino">
            <h4>Cappuccino (Hot)</h4>
            <p >$3.00 - $4.00</p>
            <a href="#"  onclick="changeTextMenu_Two()>Learn More</a>
        </div>
        /* there are 32 of these div blocks */
</div>

JavaScript:

/* MENU ITEM ONE */
function changeTextMenu_One() {
document.getElementById("item-name").innerHTML = "Coffee Menu Item One";
document.getElementById("item-description").innerHTML = "This is a sample paragraph for Menu Item One";
document.getElementById("item-cost").innerHTML = "$3.99";
document.getElementById("menu-image-one").src="images/menu-slideshow/menu-one-one.png";
document.getElementById("menu-image-two").src="images/menu-slideshow/menu-one-two.png";
document.getElementById("menu-image-three").src="images/menu-slideshow/menu-one-three.png";
currentSlide(1);
}

/* MENU ITEM TWO */
function changeTextMenu_Two() {
    document.getElementById("item-name").innerHTML = "Coffee Menu Item Two";
    document.getElementById("item-description").innerHTML = "This is a sample paragraph for Menu Item Two";
    document.getElementById("item-cost").innerHTML = "$4.99";
    document.getElementById("menu-image-one").src="images/menu-slideshow/menu-two-one.png";
    document.getElementById("menu-image-two").src="images/menu-slideshow/menu-two-two.png";
    document.getElementById("menu-image-three").src="images/menu-slideshow/menu-two-three.png";
    currentSlide(1);
}

CodePudding user response：

If you rename images, you could use arrays and one function.

Image "images/menu-slideshow/menu-one-one.png" to "images/menu-slideshow/menu-1-one.png", for example.

const item_names = ["Coffee Menu Item Zero", "Coffee Menu Item One", "Coffee Menu Item Two"];
const item_descs = ["This is a sample paragraph for Menu Item Zero", "This is a sample paragraph for Menu Item One", "This is a sample paragraph for Menu Item Two"];
const item_costs = ["Free!", "$3.99", "$4.99"];

function changeTextMenu(numb) {
    document.getElementById("item-name").innerHTML = item_names[numb];
    document.getElementById("item-description").innerHTML = item_descs[numb];
    document.getElementById("item-cost").innerHTML = item_costs[numb];
    document.getElementById("menu-image-one").src="images/menu-slideshow/menu-"   numb   "-one.png";
    document.getElementById("menu-image-two").src="images/menu-slideshow/menu-"   numb   "-two.png";
    document.getElementById("menu-image-three").src="images/menu-slideshow/menu-"   numb   "-three.png";
    currentSlide(1);
}

<a href="#"  onclick="changeTextMenu(1)">Learn More</a>

As mentioned in the comments, you can take this a step further by creating MenuItem objects and then building an array of objects which will be easier to maintain as you add and/or remove items.

After that, you can take it a step further by writing code to import data, instantiate those objects, and build the array automatically... but, all of this might be beyond the reasonable scope to answer this question.