【发布时间】:2019-02-02 06:23:54
【问题描述】:
我正在尝试做一个小型结帐 JavaScript 练习。用户将 2 个或多个项目一起添加 (checkbox) 选项,项目的价格总计然后返回。出于某种原因,我无法将数组对象的值加在一起。我的代码中的其他所有内容都只适用于该 1 部分。有人可以帮帮我吗?我的代码如下:
JavaScript
// This Array Object holds the items name and prices the user selects from
var shoppingItems = {
"Stainless Steel Cooking Pot": 29.99,
"Mini Stainless Steel Blender": 19.99,
"Kitchen Towel Set": 7.99,
"Large Tan Coffee Mug": 5.49,
"5 Round Dinner Plate Set": 5.99,
"Salt and Pepper Shaker Set": 1.99,
"Large Blue Broom": 3.98,
"Pink Soap Dish": 2.50,
"Silver Bathroom Trash Can": 6.99,
"Silk Black Bathroom Robe": 9.99,
};
var itemsSelectedValues = [];
// this is the empty array where the checkbox values will be added to
var total = 0;
// this is the variable that will hold the items total
function listOfCheckedItems(catalogToLookFrom) {
var yourItemsPurchased = $("input:checkbox:checked");
for (i = 0; i < yourItemsPurchased.length; i++) {
if(yourItemsPurchased[i].checked === true) {
itemsSelectedValues.push(yourItemsPurchased[i].value);
} // line closes if statement
} // line closes for loop
for (i = 0; i < itemsSelectedValues.length; i++) {
// line above is suppose to loop through the now full array that has the items value names stored
total = total + catalogToLookFrom[itemsSelectedValues];
// this line is suppose to set variable total to itself + the value of the item that's stored in array shoppingItems. It's suppose to do this each time through the loop. This is where the problem lies.
} // closes for loop
console.log(catalogToLookFrom[itemsSelectedValues]);
return total;
} // line closes listOfCheckedItems function
function getOrderTotal() {
listOfCheckedItems(shoppingItems);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="cash-register.html" method="post">
<p style="color:#A569BD; font-size:20px; text-decoration:underline; margin-left:20px;">Department Store Items</p>
<input type="checkbox" name="products[]" value="Stainless Steel Cooking Pot">Stainless Steel Cooking Pot - $29.99<br>
<input type="checkbox" name="products[]" value="Mini Stainless Steel Blender">Mini Stainless Steel Blender - $19.99<br>
<input type="checkbox" name="products[]" value="Kitchen Towel Set">Kitchen Towel Set - $7.99<br>
<input type="checkbox" name="products[]" value="Large Tan Coffee Mug">Large Tan Coffee Mug - $5.49<br>
<input type="checkbox" name="products[]" value="5 Round Dinner Plate Set">5 Round Dinner Plate Set - $5.99<br>
<input type="checkbox" name="products[]" value="Salt and Pepper Shaker Set">Salt and Pepper Shaker Set - $1.99<br>
<input type="checkbox" name="products[]" value="Large Blue Broom">Large Blue Broom - $3.98<br>
<input type="checkbox" name="products[]" value="Pink Soap Dish">Pink Soap Dish - $2.5<br>
<input type="checkbox" name="products[]" value="Silver Bathroom Trash Can">Silver Bathroom Trash Can - $6.99<br>
<input type="checkbox" name="products[]" value="Silk Black Bathroom Robe">Silk Black Bathroom Robe - $9.99
<br/>
<br/>
<button type="button" name="yourOrder" onclick="getOrderTotal()">Submit</button>
<br/>
<br/>
</form>
【问题讨论】:
-
尝试将此行修改为total = total + Number(catalogToLookFrom[itemsSelectedValues]);
-
if(yourItemsPurchased[i].checked === true) {是不必要的,因为该集合已经是检查项目 -
@Kapilgopinath 他们都是数字
-
@Kapilgopinath 非常感谢!
-
@mplungjan 非常感谢!
标签: javascript jquery arrays shopping-cart checkout