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

Question

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 class="box-container">
        <!-- HOT DRINKS -->
        <div class="menu-item hot-drink">
            <img src="images/menu-1.png" alt="Menu item - Espresso">
            <h4>Espresso (Hot)</h4>
            <p class="menu-cost">$2.00 - $3.00</p>
            <a href="#" class="button" onclick="changeTextMenu_One()">Learn More</a>
        </div>
        <div class="menu-item hot-drink">
            <img src="images/menu-3.png" alt="Menu item - Cappuccino">
            <h4>Cappuccino (Hot)</h4>
            <p class="menu-cost">$3.00 - $4.00</p>
            <a href="#" class="button" 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);
}

AtomicUs5000 · Accepted Answer · 2022-11-20 00:32:36Z

4

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="#" class="button" 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.

edited Nov 20, 2022 at 0:32

answered Nov 20, 2022 at 0:19

AtomicUs5000

3771 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jsN00b Over a year ago

you may consider using an array of objects (instead of 3 arrays where items may need to be tagged on the index). So, something like: const itemsList: [{ itemKey: 'uniqueKey0', name: 'Coffee', description: 'Coffee description', cost: '$3.99", }, {}, {}]; So, if we need to add a 33rd item, we just add it to the above array of objects & we're done (rather than add an entry to 3 different arrays).

AtomicUs5000 Over a year ago

Absolutely! (but baby steps)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related