Question

我正在尝试创建一个购物车，其中如果用户点击特定按钮，则金额将被添加到总计。但是，每当我这样做时，grandTotal只会添加最新事件，并且不会保留较早的总数。

请仔细阅读以下代码（完全复制粘贴）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CakeBaby2</title>
<style>

body{
margin-top: 20px;   
width: 700px;
height: 100%;
margin-left: auto;
margin-right: auto;
background-color: rgb(233, 233, 233);
background-size: cover;
height:100%
font-family: Calibri;
}   

#grandTotalHook {
margin-top: 50px;
text-align: center;
height: 2.5em;
text-align: center;
margin-right: 190px;
display: inline-block;

}

ul{
list-style-type: none;
}

#cakeHook {

float: left;
margin-right: auto;
margin-left: -70px;
}

#cookieHook {

float: right;
}


#hook1title {
text-align: center;
font-family: Calibri;
font-size: 1.5em;
color: rgb(103, 72, 102);

}

#hook2title {
text-align: center;
font-family: Calibri;
font-size: 1.5em;
color: rgb(103, 72, 102);

}

#hook3title {

float: left;
padding-left: 150px;
margin-top: 5px;
font-family: Calibri;
font-size: 1.5em;
color: rgb(35, 52, 161);
}


.grandTotalBox {

height: 1.5em;
text-align: center;
font-size: 1.25em;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 25px;
padding-right: 25px;

}

</style>


</head>
<body>

<div id = "cakeHook" class="recipe1"><p id="hook1title">Chocolate Cake</p></div>
<div id=  "cookieHook" class="recipe2"><p id="hook2title">Cookie</p></div>
<div id=  "grandTotalHook" class="grandTotalBox"><p id="hook3title">Total for the day</p></div>

<script>

var chocolateCakeIngredients = [];

var ckIng1 = {iname:"Flour", quantity:"1.75 Cups", rate:"$1.00/Cup"};
var ckIng2 = {iname:"Sugar", quantity:"&nbsp;2 Cups", rate:"$0.50/Cup"};
var ckIng3 = {iname:"Eggs", quantity:"2 Eggs", rate:"$0.20/Egg"};
var ckIng4 = {iname:"Baking Powder", quantity:"1.5 tsp", rate:"$1/tsp"};
var ckIng5 = {iname:"Baking Soda", quantity:"1.75 tsp", rate:"$1/tsp"};
var ckIng6 = {iname:"Chocolate Powder", quantity:"0.75 Cups", rate:"$2/Cup"};

var chocolateIngredientsArray = []; 

ckIng1.value = 1.75;
ckIng2.value = 1;
ckIng3.value = 0.40;
ckIng4.value = 1.50;
ckIng5.value = 1.75;
ckIng6.value = 1.50;

chocolateIngredientsArray.push(ckIng1);
chocolateIngredientsArray.push(ckIng2);
chocolateIngredientsArray.push(ckIng3);
chocolateIngredientsArray.push(ckIng4);
chocolateIngredientsArray.push(ckIng5);
chocolateIngredientsArray.push(ckIng6);

 chocolateIngredientsArray[0].id = "button1";
 chocolateIngredientsArray[1].id = "button2";
 chocolateIngredientsArray[2].id = "button3";
 chocolateIngredientsArray[3].id = "button4";
 chocolateIngredientsArray[4].id = "button5";
 chocolateIngredientsArray[0].id = "button6";


var btn1 = ckIng1;
var btn2 = ckIng2;
var btn3 = ckIng3;
var btn4 = ckIng4;
var btn5 = ckIng5;
var btn6 = ckIng6;



chocolateCakeIngredients.push(ckIng1);
chocolateCakeIngredients.push(ckIng2);
chocolateCakeIngredients.push(ckIng3);
chocolateCakeIngredients.push(ckIng4);
chocolateCakeIngredients.push(ckIng5);
chocolateCakeIngredients.push(ckIng6);


var cakeHookDiv = document.getElementById("cakeHook");

function render (ingredientList) {

var container = document.createElement("div"); //Created div for displaying chocolate cake list

//var containerElement = document.createElement ("p"); //Creation of a p tag

//containerElement.innerHTML = "<h2>"+"Chocolate Cake"+"</h2"; //Header for the chocolate cake p tag

//container.appendChild(containerElement); //Appending p tag header element to the div

cakeHookDiv.appendChild(container); //Appending the div to main hook on page, i.e. cakeHook

//Adding ingredients list to the chocolate cake

var containerElementUl = document.createElement ("ul");
var containerElementLi = document.createElement ("li");
var containerElementLiButton = document.createElement ("button");
containerElementLiButton.innerHTML = ingredientList.iname + ingredientList.quantity + ingredientList.rate;
containerElementLi.appendChild(containerElementLiButton);
containerElementUl.appendChild(containerElementLi);
container.appendChild(containerElementUl);
cakeHookDiv.appendChild(container);
}

render (chocolateCakeIngredients[0]);
render (chocolateCakeIngredients[1]);
render (chocolateCakeIngredients[2]);
render (chocolateCakeIngredients[3]);
render (chocolateCakeIngredients[4]);
render (chocolateCakeIngredients[5]);


var cookieIngredients = [];

var coIng1 = {iname:"Butter", quantity:"0.50 Cups", rate:"$4.00/Cup"};
var coIng2 = {iname:"Flour", quantity:"2 Cups", rate:"$0.50/Cup"};
var coIng3 = {iname:"Baking Powder", quantity:"0.50 tsp", rate:"$1/tsp"};
var coIng4 = {iname:"Eggs", quantity:"1 Egg", rate:"$0.20/Egg"};
var coIng5 = {iname:"Chocolate Chips", quantity:"1 Cup", rate:"$2.50/Cup"};

coIng1.value = 2;
coIng2.value = 1;
coIng3.value = 0.50;
coIng4.value = 0.20;
coIng5.value = 2.50;

cookieIngredients.push(coIng1);
cookieIngredients.push(coIng2);
cookieIngredients.push(coIng3);
cookieIngredients.push(coIng4);
cookieIngredients.push(coIng5);


var cookieHookDiv = document.getElementById("cookieHook");

function render2 (ingredientList2) {

var container2 = document.createElement("div");
cookieHookDiv.appendChild(container2);
var containerElementUl2 = document.createElement("Ul");
var containerElementLi2 = document.createElement("li");
var containerElementLiButton2 = document.createElement ("button");
containerElementLiButton2.innerHTML = ingredientList2.iname + ingredientList2.quantity + ingredientList2.rate;
containerElementLi2.appendChild(containerElementLiButton2);
containerElementUl2.appendChild(containerElementLi2);
container2.appendChild(containerElementUl2);
cookieHookDiv.appendChild(container2);
}

render2 (cookieIngredients[0]);
render2 (cookieIngredients[1]);
render2 (cookieIngredients[2]);
render2 (cookieIngredients[3]);
render2 (cookieIngredients[4]);

var grandTotalDiv = document.getElementById("grandTotalHook");

var container3 = document.createElement("div");
grandTotalDiv.appendChild(container3);
var containerElement3 = document.createElement("input");
containerElement3.type = "text";
containerElement3.className = "grandTotalBox";
containerElement3.id = "total";
containerElement3.value = 0;
container3.appendChild(containerElement3);


//var grandTotal = document.getElementsByClassName("grandTotalBox").value;

//grandTotal.value = 0;
//       document.getElementsByClassName("grandTotalBox").value= '$' + grandTotal;


var grandTotal = document.getElementById("total").value;

var counter = 0;

function addition () {


};

btn1.onclick = addition ();

</script>

</body>

</html>

任何帮助都将不胜感激。

再次感谢你。

Answer 1

应该是

var grandTotal = btn1.value;
grandTotal += btn2.value;
grandTotal += btn3.value;
grandTotal += btn4.value;

需要在javascript中同时添加相同的变量

1 个答案: