我正在尝试将名为LineItemCalc（）的函数的结果返回到具有以下布局的div（id = BurgerOrder）中的HTML表中
Pepperoni | 0.75
Tomatoes | 0.7
Pineapple | 1
Beef Brisket & Chunks | 3.75
Chedder | 1.75
Dijonnaise | 1.75
Honey BBQ Sauce | 1.8
Spiced Sesame Buns | 1
此刻，当用户输入orderstage 6并单击按钮时，它以console.log的形式返回结果，但是我需要将其显示为HTML表格
任何帮助将不胜感激
我尝试使用push方法，但是它会追加到现有数组中并提供以下输出：
let customer-burger = ["Pepperoni", 0.75,"Tomatoes",0.7,"Pineapple", 1.00]
但是我的意图是
let customer-burger = [{"Chosen Item", "Chosen Item Price"},{"Pepperoni", 0.75},{"Tomatoes",0.7},{"Pineapple", 1.00}]
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Burger Build</title>
<link href="Burger-Build.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Bangers|Lobster|Permanent+Marker" rel="stylesheet">
</head>
<body>
<div class="modal-bb"> <!-- Container for modal-box -->
<div class="modal-bb-contents"> <!-- modal-box -->
<div class = "button-container">
<p class="expander-toggle" id="burger-toggle" onClick="burgerOptionsToggle()">+</p>
<button id="heading-button">Start Creating Your burger</button>
</div>
<div class="ingre-chkbox" id="burger-options">
</div>
<div id="BurgerOrder">
</div>
<div>
<button id="submit-button" onClick="headingTitle();">Click to Start</button>
</div>
</div>
</div>
<script src="burger-build.js"></script>
</body>
</html>
JavaScript
//creation arrays to store checkbox options
let ChosenToppings = [];
let ChosenMeats = [];
let ChosenCheese = [];
let ChosenSauce = [];
let ChosenBread = [];
let orderstage = 1;
//Stage of ordering process
//1: Burger Topping
//2: Meat Patty
//3: Cheese
//4: Sauce
//5: Bread
//stage 1
const AvailableToppings = [
{Name: "No Additional Toppings",ExtraPrice: 0.00},
{Name: "Pepperoni",ExtraPrice: 0.75},
{Name: "Tomatoes", ExtraPrice: 0.70},
{Name: "Anchovies", ExtraPrice: 0.60},
{Name: "Mushroom", ExtraPrice: 0.50},
{Name: "Gerkins", ExtraPrice: 0.80},
{Name: "Pineapple", ExtraPrice: 1.00},
{Name: "Turkey Ham", ExtraPrice: 1.00},
{Name: "Caramalised Onions", ExtraPrice: 1.50},
{Name: "Donner", ExtraPrice: 1.50},
{Name: "Jalapenos", ExtraPrice: 0.50}
];
//stage 2
const AvailableMeats = [
{Name: "Beef Brisket & Chunks",ExtraPrice: 3.75},
{Name: "Chicken Fillet", ExtraPrice: 3.50},
{Name: "Crabmeat", ExtraPrice: 3.60},
{Name: "Chickpeas", ExtraPrice: 2.50},
];
//Stage 3
const AvailableCheese = [
{Name: "No Cheese", ExtraPrice: 0.00},
{Name: "Chedder", ExtraPrice: 1.75},
{Name: "Brie", ExtraPrice: 1.70},
{Name: "Goat Cheese", ExtraPrice: 1.60},
{Name: "Smoked Gouda", ExtraPrice: 1.50},
{Name: "Monterey Jack", ExtraPrice: 1.5},
{Name: "Stilton", ExtraPrice: 3.00}
]
//stage 4
const AvailableSauce = [
{Name: "No Sauce", ExtraPrice: 0.00},
{Name: "Dijonnaise", ExtraPrice: 1.75},
{Name: "Sriracha Mayo", ExtraPrice: 1.70},
{Name: "Classic Aioli", ExtraPrice: 1.60},
{Name: "Toasted Sesame Teriyaki Sauce", ExtraPrice: 1.50},
{Name: "Mole Poblano", ExtraPrice: 1.5},
{Name: "Honey BBQ Sauce", ExtraPrice: 1.80},
{Name: "Cheese Sauce", ExtraPrice: 1.80}
]
//stage 5
const AvailableBread = [
{Name: "Ciabatta Roll", ExtraPrice: 0.75},
{Name: "English Muffin", ExtraPrice: 0.70},
{Name: "Brioche bun", ExtraPrice: 0.60},
{Name: "Onion Roll", ExtraPrice: 0.50},
{Name: "StroopWafel", ExtraPrice: 0.80},
{Name: "Spiced Sesame Buns", ExtraPrice: 1.00},
{Name: "Pretzel Roll", ExtraPrice: 1.00}
]
function headingTitle(){
var submitbtn = document.getElementById("submit-button")
var headingbtn = document.getElementById("heading-button")
if (orderstage == 1) {
console.log("Heading Title - Stage:" + orderstage)
submitbtn.innerHTML = "Submit toppings";
headingbtn.innerHTML= "Choose Burger Toppings";
burgerOptionsToggle();
submitbtn.setAttribute("onClick", "submitToppings()");
} else if (orderstage == 2) {
console.log("Heading Title - Stage:" + orderstage);
submitbtn.innerHTML = "Submit Patty Options";
headingbtn.innerHTML = "Choose Meat Patty";
meatOptionsToggle();
submitbtn.setAttribute("onClick", "submitToppings()");
} else if (orderstage == 3) {
console.log("Heading Title - Stage:" + orderstage);
submitbtn.innerHTML = "Submit Cheese Options";
headingbtn.innerHTML = "Choose Cheese Options";
cheeseOptionsToggle();
submitbtn.setAttribute("onClick", "submitToppings()");
} else if (orderstage == 4) {
console.log("Heading Title - Stage:" + orderstage);
submitbtn.innerHTML = "Submit Sauce Options";
headingbtn.innerHTML = "Choose Sauce Options";
sauceOptionsToggle();
submitbtn.setAttribute("onClick", "submitToppings()");
} else if (orderstage == 5) {
console.log("Heading Title - Stage:" + orderstage);
submitbtn.innerHTML = "Submit Burger Concoction";
headingbtn.innerHTML = "Choose Bread Options";
breadOptionsToggle();
submitbtn.setAttribute("onClick", "submitToppings()");
} else if (orderstage == 6) {
console.log("Heading Title - Stage:" + orderstage);
submitbtn.setAttribute("onClick", "BurgerCalcs()");
submitbtn.innerHTML = "Complete Burger Concoction";
headingbtn.innerHTML = "You Burger Concoction";
}};
//Burger Options Toggle
function burgerOptionsToggle(){
var ingreChkboxes = document.getElementById('burger-options');
AvailableToppings.map((AvailableTopping, index) => {
var Name = AvailableTopping.Name;
var parentDiv = document.createElement('div');
parentDiv.setAttribute('class', 'column');
var Label = document.createElement('label');
Label.setAttribute('for', Name);
var Node = document.createTextNode(Name + " ");
Label.appendChild(Node);
var Input = document.createElement('input');
Input.setAttribute('type', 'checkbox');
Input.setAttribute('name', Name);
parentDiv.appendChild(Label).appendChild(Input);
ingreChkboxes.appendChild(parentDiv);
});
}
//Meat Options Toggle
function meatOptionsToggle(){
var ingreChkboxes = document.getElementById('burger-options');
AvailableMeats.map((AvailableMeats, index) => {
var Name = AvailableMeats.Name;
var parentDiv = document.createElement('div');
parentDiv.setAttribute('class', 'column');
var Label = document.createElement('label');
Label.setAttribute('for', Name);
var Node = document.createTextNode(Name + " ");
Label.appendChild(Node);
var Input = document.createElement('input');
Input.setAttribute('type', 'checkbox');
Input.setAttribute('name', Name);
parentDiv.appendChild(Label).appendChild(Input);
ingreChkboxes.appendChild(parentDiv);
});
}
//Cheese Options Toggle
function cheeseOptionsToggle(){
var ingreChkboxes = document.getElementById('burger-options');
AvailableCheese.map((AvailableCheese, index) => {
var Name = AvailableCheese.Name;
var parentDiv = document.createElement('div');
parentDiv.setAttribute('class', 'column');
var Label = document.createElement('label');
Label.setAttribute('for', Name);
var Node = document.createTextNode(Name + " ");
Label.appendChild(Node);
var Input = document.createElement('input');
Input.setAttribute('type', 'checkbox');
Input.setAttribute('name', Name);
parentDiv.appendChild(Label).appendChild(Input);
ingreChkboxes.appendChild(parentDiv);
});
}
//Sauce Options Toggle
function sauceOptionsToggle(){
var ingreChkboxes = document.getElementById('burger-options');
AvailableSauce.map((AvailableSauce, index) => {
var Name = AvailableSauce.Name;
var parentDiv = document.createElement('div');
parentDiv.setAttribute('class', 'column');
var Label = document.createElement('label');
Label.setAttribute('for', Name);
var Node = document.createTextNode(Name + " ");
Label.appendChild(Node);
var Input = document.createElement('input');
Input.setAttribute('type', 'checkbox');
Input.setAttribute('name', Name);
parentDiv.appendChild(Label).appendChild(Input);
ingreChkboxes.appendChild(parentDiv);
});
}
//Bread Options Toggle
function breadOptionsToggle(){
var ingreChkboxes = document.getElementById('burger-options');
AvailableBread.map((AvailableBread, index) => {
var Name = AvailableBread.Name;
var parentDiv = document.createElement('div');
parentDiv.setAttribute('class', 'column');
var Label = document.createElement('label');
Label.setAttribute('for', Name);
var Node = document.createTextNode(Name + " ");
Label.appendChild(Node);
var Input = document.createElement('input');
Input.setAttribute('type', 'checkbox');
Input.setAttribute('name', Name);
parentDiv.appendChild(Label).appendChild(Input);
ingreChkboxes.appendChild(parentDiv);
});
}
//Add checkbox options to selective array
function submitToppings() {
var burgerTopping = document.getElementById("burger-options")
var options = document.querySelectorAll("#burger-options input[type=checkbox]");
if (orderstage == 1) {
options.forEach((option) => {
if(option.checked) {
ChosenToppings.push(option.getAttribute('name'));
}
//burgerTopping.style.display = "none";
})
orderstage++;
console.log(orderstage);
console.log(ChosenToppings);
console.log("removeElementsByClass");
removeElementsByClass("column");
} else if (orderstage == 2) {
options.forEach((option) => {
if(option.checked) {
ChosenMeats.push(option.getAttribute('name'));
}
//burgerTopping.style.display = "none";
})
orderstage++;
console.log(orderstage);
console.log(ChosenMeats);
console.log("removeElementsByClass");
removeElementsByClass("column");
} else if (orderstage == 3) {
options.forEach((option) => {
if(option.checked) {
ChosenCheese.push(option.getAttribute('name'));
}
//burgerTopping.style.display = "none";
})
orderstage++;
console.log(orderstage);
console.log(ChosenCheese);
console.log("removeElementsByClass");
removeElementsByClass("column");
} else if (orderstage == 4) {
options.forEach((option) => {
if(option.checked) {
ChosenSauce.push(option.getAttribute('name'));
}
//burgerTopping.style.display = "none";
})
orderstage++;
console.log(orderstage);
console.log(ChosenSauce);
console.log("removeElementsByClass");
removeElementsByClass("column");
} else if (orderstage == 5) {
options.forEach((option) => {
if(option.checked) {
ChosenBread.push(option.getAttribute('name'));
}
//burgerTopping.style.display = "none";
})
orderstage++;
console.log(orderstage);
console.log(ChosenBread);
console.log("removeElementsByClass");
removeElementsByClass("column");
}}
//Delete checkbox options
function removeElementsByClass(className){
var elements = document.getElementsByClassName(className);
while(elements.length > 0){
elements[0].parentNode.removeChild(elements[0]);
};
headingTitle(orderstage);
}
function BurgerCalcs() {
LineItemCalc('Chosen Toppings',ChosenToppings, AvailableToppings);
LineItemCalc('Chosen Meat',ChosenMeats, AvailableMeats);
LineItemCalc('Chosen Cheese',ChosenCheese, AvailableCheese);
LineItemCalc('Chosen Sauce',ChosenSauce, AvailableSauce);
LineItemCalc('Chosen Bread',ChosenBread, AvailableBread);
}
//Search the chosen array against a string value and return a name and extra price value
function LineItemCalc( Option, ChosenArray, AvailableArray) {
let subtotal = 0.00;
for (var ct=0; ct<ChosenArray.length; ct++) {
let ctn = ChosenArray[ct];
for (var i=0; i < AvailableArray.length; i++) {
if (AvailableArray[i].Name === ctn) {
console.log(AvailableArray[i].Name +" : £" + AvailableArray[i].ExtraPrice)
subtotal = subtotal + AvailableArray[i].ExtraPrice;
}
}
}
console.log(Option + ": £" + subtotal)
}