Javascript - trying to add array object values together after looping through them

Question

I'm trying to do a mini checkout JavaScript exercise. The user adds 2 or more items together (checkbox) options, the price of the items are totaled then returned. For some reason I can't add the values of the array objects together. Everything else in my code work just that 1 section. Can someone please help me? My code is below:

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>

Answer 1

You forgot the [i] in the loop

total = total + catalogToLookFrom[itemsSelectedValues[i]];

Here is a MUCH simplified version

$(function() { // when the page loads
  $("input:checkbox").on("change", function() { // each time something changes
    var total = 0;
    $("input[type=checkbox]:checked").each(function() { // only checked boxes
      total += shoppingItems[this.value]; // the prices are already numbers
    })
    $("#total").text(total.toFixed(2)); // 2 decimals
  }).change(); // run at load time to calculate
})

// 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,
};

<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">Submit</button>
  <br/>
  <br/>
</form>
Total: $<span id="total"></span>