How to assign different object values to different buttons while using the same function?

Good morning!

I am obviously pretty new to the whole programming thing, so I am working on a basic PoS application for a restaurant. I am trying to figure out how I can assign different values to the different buttons while using the same button click function. I know I could write out a new function for each button, but there has to be a better way. I currently just have it set for the top right port nachos button to push the information into the tab section (though right now I am drawing a blank as to why it is the only one to do this instead of all the foodbuttons pushing the pork nachos info). Any help would be greatly appreciated. Thanks again!

<body>
    <header>
        <h1>Point of Sale</h1>
    </header>
    <section id="foodOptionsSection">
        <h3>Food Options</h3>
        <button type="button" class= "foodButtons buttons" id="porkNachosFood">Pulled Pork Nachoes</button>
        <button type="button" class= "foodButtons buttons" id="wingsFood">6 Wings</button>
        <button type="button" class= "foodButtons buttons" id="totsFood">Tater Tots</button>
        <button type="button" class= "foodButtons buttons" id="hamburgerFood">Hamburger</button>
        <button type="button" class= "foodButtons buttons" id="cbqbbqFood">CBWBBQ</button>
        <button type="button" class= "foodButtons buttons" id="ppgcFood">PPGC</button>
        <button type="button" class= "foodButtons buttons" id="tacosFood">Tacos</button>
        <button type="button" class= "foodButtons buttons" id="friesFood">Fries</button>
        <button type="button" class= "foodButtons buttons" id="porkRindsFood">Pork Rinds</button>


    </section>
    <section id="tabList">
        <h3>Current Tab</h3>
        <div class="tabNameList tab">

        </div>
        <div class="tabAmountList tab">

        </div>

    </section>
    <script src="script.js"></script>
</body>
//Vars

const food = [
    {
        name: "Pulled Pork Nachos",
        price: 10.00
    },
    {
        name: "6 Wings",
        price: 5.00
    },
    {
        name: "Pork Rinds",
        price: 4.00
    }
];
const drinks = [
    {
        name: "Well Vodka",
        price: 5.00
    },
    {
        name: "Well Whiskey",
        price: 5.00
    }
];
const merch = [
    {
        name: "Well Vodka",
        price: 5.00
    },
    {
        name: "T Shirt",
        price: 20.00
    }
];

const tabNameSection = document.querySelector('.tabNameList');
const tabAmountSection = document.querySelector('.tabAmountList');
const btns = document.querySelector('.foodButtons');


// const wings = document.querySelector('#wingsFood');
// wings.assign('wings', 6.00)
// console.log(wings);

//Functions
function addTab(event) {
    
    //Name Div
    const tabNames = document.createElement('div');
    tabNames.classList.add('tabNameList');

    //Amt Div
    const tabAmt = document.createElement('div');
    tabAmt.classList.add('tabAmtList');

    //Create LI Tab Names
    const tabNameList = document.createElement('li');
    tabNameList.innerText = food[0].name;    
    tabNameList.classList.add('tabScreenNames');
    tabNames.appendChild(tabNameList);

    //Create LI Tab Amounts
    const tabAmountList = document.createElement('li');
    tabAmountList.innerText = food[0].price;
    tabAmountList.classList.add('tabScreenAmount');
    tabAmt.appendChild(tabAmountList);

     //Check trash button
    const trashButton = document.createElement("button")
    trashButton.innerHTML = '<i class="fas fa-trash"></i>';
    trashButton.classList.add("trash-btn");

    //append to LIs
    tabNameSection.appendChild(tabNames);
    tabAmountSection.appendChild(tabAmt);
    tabAmountSection.appendChild(trashButton);
};


//Events
btns.addEventListener('click', addTab);

this select only one element

to select all of them you would need to use querySelectorAll, which returns an html collection (array-like) and iterate over it with a loop to assign to all the elements

maybe with the this keyword, look here (if it doesn’t bring there, the section is “As a DOM event handler”)

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.