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);