在列表中的列表之后，加法和减法按钮不起作用（JavaScript）
我最近启动了一个项目，在一家餐厅的桌子上添加物品并保存价值 我从一个项目列表开始，它工作得非常好，但当我添加第二个列表并尝试通过按钮减去/添加项目时，项目的数量会下降/上升，但总数将保持不变 但在添加新项目时，金额仍会更新 如果在下面添加代码，您可以像那样执行它并测试自己在列表中的列表之后，加法和减法按钮不起作用（JavaScript）,javascript,html,css,list,onclick,Javascript,Html,Css,List,Onclick,我最近启动了一个项目，在一家餐厅的桌子上添加物品并保存价值 我从一个项目列表开始，它工作得非常好，但当我添加第二个列表并尝试通过按钮减去/添加项目时，项目的数量会下降/上升，但总数将保持不变 但在添加新项目时，金额仍会更新 如果在下面添加代码，您可以像那样执行它并测试自己 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prototyp</title>
<style>
.table{
text-align: center;
line-height: 9vh;
height: 10vh;
}
.tablei{
background-color: #e58e26;
font-size: 44pt;
}
.table-down{
margin-top: 90vh;
}
.left, .right{
width: 45vw;
height: 100vh;
border: solid 1pt black;
display: table-cell;
font-size: 20pt;
}
.wrapperBottom{
display: none;
}
.btn{
background-color: #e58e26 !important;
}
.btn-right{
font-size: 28pt;
margin-left: 15vh;
color: #e58e26;
}
body{
background-color: #292929;
color: white;
font-size: 16pt;
font-weight: bold;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body onload="init()">
<div class="row" id="up">
<div class="table tablei col s1" onclick="goNext(1)">1</div>
</div>
<div class="row wrapperBottom" id="bottom">
<div class="col s5" id="sum"></div>
<div class="col s2">
<a class="waves-effect waves-light btn table-down" onclick="goBack()">back to table</a>
</div>
<div class="wrapperacordion">
<button class="accordion accordionheadings">Softdrinks</button>
<div class="col s5 accordionbabahaft" id="Softdrinks"></div>
<button class="accordion accordionheadings">Juice</button>
<div class="col s5 accordionbabahaft" id="Juice"></div>
</div>
</div>
<script>
let tables;
let currentTable;
let products;
softdrinks = [
{name:"Water", price:2.40},
{name:"Soda", price:2.70},
]
juice = [
{name:"OrangeJuice", price:2.40},
{name:"AppleJuice", price:3.90},
{name:"BananaJuice", price:2.40}
]
function init() {
tables = [];
products = [];
products['Softdrinks'] = softdrinks;
products['Juice'] = juice;
}
function goNext(tablenumber){
currentTable = tablenumber;
if(!tables[tablenumber]){
tables[tablenumber] = {products: [], sum: 0};
}
document.getElementById("bottom").style.display = 'block';
document.getElementById("up").style.display = 'none';
document.getElementById("Softdrinks").innerHTML = "";
document.getElementById("Juice").innerHTML = "";
for (let list in products) {
for (let prod of products[list]){
let button = document.createElement("a");
button.setAttribute('class', 'button accordionitems');
button.onclick = () =>{
let entry = null;
for (let pos of tables[tablenumber].products) {
if(pos.name === prod.name){
entry = pos;
}
}
if(!entry){
entry = {name:prod.name, amount: 0, price: 0}
tables[tablenumber].products.push(entry)
}
entry.amount++;
entry.price+= prod.price;
updateSum();
}
button.innerText = prod.name + " " + prod.price + "€";
document.getElementById(list).append(button)
updateSum();
}
}
}
function findPrice(name) {
let price = 0;
for(let prod of products){
if(prod.name === name){
price = prod.price;
break;
}
}
return price;
}
function updateSum(){
document.getElementById("sum").innerHTML = "";
let sum = 0;
let hr = document.createElement("hr");
let sumDiv = document.createElement("div");
let deleteButton = document.createElement("a");
deleteButton.setAttribute('class', 'waves-effect waves-light btn');
for (let prod of tables[currentTable].products) {
let div = document.createElement("div");
let label = document.createElement("span");
label.innerHTML = prod.amount + "x " + prod.name +": "+ prod.price.toFixed(2) +"€ ";
sum += prod.price;
let divPlusMinus = document.createElement("aside");
div.appendChild(divPlusMinus);
divPlusMinus.setAttribute('class', 'gorightpls');
let plus = document.createElement("a");
plus.setAttribute('class', 'btn-plus');
plus.innerHTML ="+ ";
plus.addEventListener("click", ()=>{
prod.amount++;
prod.price+= findPrice(prod.name);
updateSum();
});
let minus = document.createElement("a");
minus.setAttribute('class', 'btn-minus');
minus.addEventListener("click", ()=>{
prod.amount--;
prod.price-= findPrice(prod.name);
updateSum();
});
minus.innerHTML ="− ";
div.append(label);
div.append(minus);
divPlusMinus.append(plus);
divPlusMinus.append(minus);
document.getElementById("sum").append(div)
}
tables[currentTable].sum = sum;
sumDiv.innerHTML = "Sum : "+sum.toFixed(2) +" €"
deleteButton.onclick = () =>{
clicked();
}
deleteButton.innerText ="clear table"
document.getElementById("sum").append(hr)
document.getElementById("sum").append(sumDiv)
document.getElementById("sum").append(deleteButton)
}
function goBack(){
document.getElementById("bottom").style.display = 'none';
document.getElementById("up").style.display = 'block';
}
function clicked() {
var r = confirm("Wirklich löschen?");
if(r==true){
tables[currentTable].products = [];
updateSum();
goBack();
} else {
}
}
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
原型
1.
回到桌上
软饮料
果汁
findPrice（）中更改产品的迭代
产品
具有第一级对象，然后位于其值列表中。您需要两个forloop
来访问此详细信息
原型
.桌子{
文本对齐：居中；
线路高度：9vh；
高度：10vh；
}
表一{
背景色：#e58e26；
字号：44pt；
}
.放下桌子{
边际上限：90vh；
}
.左，.右{
宽度：45vw；
高度：100vh；
边框：纯色1pt黑色；
显示：表格单元格；
字号：20pt；
}
.包装器底部{
显示：无；
}
.btn{
背景色：#e58e26！重要；
}
.btn对{
字号：28pt；
左边距：15vh；
颜色：#e58e26；
}
身体{
背景色：#292929；
颜色：白色；
字号：16pt；
字体大小：粗体；
}
1.
回到桌上
软饮料
果汁
让桌子；
让电流表；
让产品；
软饮料=[
{名称：“水”，价格：2.40}，
{名称：“苏打”，价格：2.70}，
]
果汁=[
{名称：“OrangeJuice”，价格：2.40}，
{名称：“应用指南”，价格：3.90}，
{名称：“香蕉汁”，价格：2.40}
]
函数init（）{
表=[]；
产品=[]；
产品[“软饮料”]=软饮料；
产品[“果汁”]=果汁；
}
函数goNext（表号）{
currentTable=表格编号；
如果（！tables[tablenumber]）{
表[tablenumber]={products:[]，sum:0}；
}
document.getElementById（“底部”）.style.display='block'；
document.getElementById（“up”）.style.display='none'；
document.getElementById（“软饮料”）.innerHTML=“”；
document.getElementById（“Juice”）.innerHTML=“”；
对于（在产品中列出）{
对于（让产品生产[列表]）{
let button=document.createElement（“a”）；
setAttribute（'class'，'button accordionitems'）；
button.onclick=（）=>{
让entry=null；
对于（让表的位置[tablenumber]。产品）{
如果（位置名称===产品名称）{
入口=pos；
}
}
如果（！输入）{
条目={name:prod.name，金额：0，价格：0}
表[tablenumber].products.push（条目）
}
条目.金额++；
分录价格+=产品价格；
updateSum（）；
}
button.innerText=prod.name+“”+prod.price+“€”；
document.getElementById（列表）.append（按钮）
updateSum（）；
}
}
}
函数findPrice（名称）{
让价格=0；
//控制台日志（产品）；
//console.log（名称）；
对于（让对象值的生产（产品））{
//用于（让产品生产）{
对于（var i=0；i{
prod.amount++；
产品价格+=findPrice（产品名称）；
updateSum（）；
});
设减号=document.createElement（“a”）；
setAttribute（'class'，'btn减号'）；
减.addEventListener（“单击”，（）=>{
产品数量；
产品价格-=findPrice（产品名称）；
updateSum（）；
});
减号.innerHTML=”− ";
div.append（标签）；
div.append（减）；
附加（加）；
附加（减）；
document.getElementById（“sum”）.append（div）
}
表[currentTable]。总和=总和；
sumDiv.innerHTML=“总和：”+Sum.toFixed（2）+“&euro；”
deleteButton.onclick=（）=>{
点击（）；
}
deleteButton.innerText=“清除表格”
document.getElementById（“sum”）.append（hr）
document.getElementById（“sum”）.append（sumDiv）
document.getElementById（“sum”）.append（deleteButton）
}
函数goBack（）{
document.getElementById（“底部”）.style.display='none'；
document.getElementById（“up”）.style.display='block'；
}
函数单击（）{
var r=确认（“威克利希·löschen？”）；
如果（r==true）{
表[currentTable]。产品=[]；
updateSum（）；
goBack（）；
}否则{
}
}
document.addEventListener（'DOMContentLoaded'，function（）{
var elems=document.querySelectorAll（'select'）；
var实例=M.FormSelect.init（elems）；
});
var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i
添加类别后，“产品”数组现在有两个命名属性：
[软饮料：阵列（2），果汁：阵列（3）]function findPrice(name) {
let price = 0;
for(let category in products){
for(let prod of products[category]){
if(prod.name === name){
price = prod.price;
break;
}
}
}
return price;
}