this is my first time using StackOverflow, and so far its helped me a loT! I am trying to make a pizza website, and I am running into an error that forEach is not defined. I tried to research this, but i only came out more confused than I was before. How exactly do i define this? Any help would be greatly appreciated!
function getInputValue(inputArray){
const innerTextArray = [];
inputArray.forEach(function(element){
const elementString = element.value;
innerTextArray.push(elementString);
});
return innerTextArray;
}
function Pizza(size, topping) {
this.size = size;
this.topping = topping
}
class Toppings extends Pizza {
pushToPizza(input){
this.prices.push(input);
}
}
Pizza.prototype.totalCost = function(){
let total = 0.00;
if (this.size === "Small"){
total += 10.00;
} else if (this.size === "Medium"){
total += 12.00;
} else if (this.size === "Large"){
total += 14.00;
}
this.toppings.forEach(function(element){
total += 1.50;
}
)
subtotal = total * 1;
total = subtotal * 1.10
total = total * 1.10
return total;
}
window.onload=function(){
window.addEventListener("load", function(){
document.querySelector("form#pizza-form").addEventListener("submit", handleSubmission);
document.querySelector("form#pizza-form").addEventListener("reset", handleReset);
})
}
function handleSubmission(event){
event.preventDefault();
const orderDisplay = document.getElementById("order-list");
orderDisplay.innerHTML="";
const size = document.querySelector("input[name='size']:checked").value;
const toppingsSelected = document.querySelectorAll("input[name='topping']:checked");
const toppings = getInputValue(toppingsSelected);
const pizza1 = new Pizza(size, toppings);
const cost = pizza1.totalCost();
const myOrder = convertOrder(pizza1);
const myCost = listCosts(myOrder);
displayOrder(myOrder, myCost);
displayCost(cost);
}
function handleReset(){
const orderDisplay = document.getElementById("order-list");
const subDisplay = document.querySelector("span#subtotal");
const taxDisplay = document.querySelector("span#total-tax");
const costDisplay = document.querySelector("span#total-cost");
orderDisplay.innerHTML="";
subDisplay.innerText = "";
taxDisplay.innerText = "";
costDisplay.innerText = "";
}
function convertOrder(order){
const processArray = Object.values(order);
const convertedArray = [];
processArray.forEach(function(element){
if(Array.isArray(element)){
const subArray = Object.values(element);
subArray.forEach(function(element){
convertedArray.push(element);
});
} else {
convertedArray.push(element);
}
});
return convertedArray;
}
function listCosts(convertedArray){
const listArray = []
convertedArray.forEach(function(element){
switch (element) {
case("pepperoni"):
case("veggieMix"):
case("pineapple"):
case("sausage"):
case("cheese"):
case("crust"):
listArray.push("1.50");
break;
case("small"):
listArray.push("10.00");
break;
case("medium"):
listArray.push("12.00");
break;
case("large"):
listArray.push("14.00");
break;
default:
listArray.push("2.00");
console.log("pushing " + element)
}
});
return(listArray);
}
Ive looked Up many solutions, but they all seem to break the code more than it already is.