Javascript - попытка добавить значения объекта массива вместе после их прохождения - PullRequest
Новая
       59

Javascript - попытка добавить значения объекта массива вместе после их прохождения

0 голосов
/ 27 августа 2018

Я пытаюсь выполнить мини-проверку 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>

Ответы [ 3 ]

0 голосов
/ 27 августа 2018

Вы забыли [i] в ​​цикле

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

Вот очень упрощенная версия 

$(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>
0 голосов
/ 27 августа 2018

Вы можете упростить ваш код в один слой с помощью array.reduce (см. документы для сокращения): 

$("input:checkbox:checked").toArray().reduce((a, e) => a + catalog[e.value], 0)

Это начинается с вызова toArray() вашей коллекции jQ, чтобы превратить ее в массив vanilla. Функция reduce, вызываемая в этом массиве, передает каждый элемент массива (e) в функцию обратного вызова. reduce также принимает второй параметр 0, который накапливает итоговую сумму. Эта сумма повторно передается в параметр a обратного вызова reduce и добавляется к каждому значению e, полученному из объекта catalog. 

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

const listOfCheckedItems = catalog =>
  $("input:checkbox:checked").toArray().reduce((a, e) => a + catalog[e.value], 0)
; 

function getOrderTotal() {
  console.log(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>
0 голосов
/ 27 августа 2018

Здесь вы можете использовать другую и более чистую логику.

После того как вы выбрали элементы с помощью jQuery, вы можете перебирать эти объекты, используя .each(), где контекст this будет непосредственно элементом.

Кроме того, вам не нужен массив со значениями, вы можете просто затем суммировать его внутри функции each(), передавая значения из выбранных в массив shoppingItems способом, который вы извлекаете значение $. В конце итерации вы получите итоговое значение.

И, как сказано в комментариях к моему ответу, вам не нужно проверять this.checked === true после того, как вы выбрали в jQuery только те, которые проверены.

посмотрите, пожалуйста: 

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

function listOfCheckedItems(catalogToLookFrom) {
  var yourItemsPurchased = $("input:checkbox:checked");
  var totalValue = 0;
  yourItemsPurchased.each(function(){      
      totalValue += parseFloat(shoppingItems[this.value]);
  }) 
  
  
  console.log(totalValue);
  return totalValue;
}

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