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

-1

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

请通过下面的代码（复制粘贴全部）

<!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>

任何帮助，将不胜感激。

再次感谢你。

来源

2014-02-10 user2918328

这是'+ ='，'不= +'。后者不是语法错误，但它不会做同样的事情。 – Pointy

应该

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

来源

2014-02-10 21:38:11 ElDoRado1239

请通过下面的代码实际要求： - （复制粘贴整个代码） – user2918328

亲爱的@JiříEldorado拜耳，请你看看代码，让我知道我在哪里出错了实现功能？ – user2918328

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

回答

相关问题