时间戳

首页 > 解决方案 > 使用 map() 和 push() 的函数显示不正确的输出

javascript - 使用 map() 和 push() 的函数显示不正确的输出

问题描述

我的程序应该做的是充当购物车。在输入框中，用户输入productCode和quantity，当他们点击button表单上的 时，程序会创建一个动态列表，其中包含添加的产品、订购的数量、总数量，同时total每次更新。我遇到的错误是我的功能没有显示正确的输出。原谅我和我的经验不足，但我选择使用map()andpush()顺序，因为我不确定如何编写这个代码。任何帮助，将不胜感激。

当前/错误输出

在此处输入图像描述

正确/期望的输出

在此处输入图像描述

当前代码

let purchases = []
//function to create shopping cart
function createList() {
  let products = ["Winter Hat", "Warm Coat", +"Gloves"];
  let prices = [27.50, 160.23, 23.99];

  let productCode = document.getElementById("productCode").value;
  let quantity = document.getElementById("quantity").value;

  let message = " Product Code or Quantity invalid. Enter values from list above.";
  // message to alert if code is invalid
  if (productCode < 1 || productCode > 3 || quantity < 1) {
    alert(message);
  }

  purchases.push({
    product: products[productCode - 1],
    quantity: quantity,
    total: "Total Price: $" + prices[productCode - 1] * quantity
  });
  // appends list to 
  let list = document.getElementById("list");
  // cals for every item
  list.innerHTML = purchases.map(p => {
    return "<li>" + p.product + " (Quantity: " + p.quantity + ") Cost: " + p.total + "</li>";
  }).join("");

  //
  document.getElementById("results").innerText = purchases.reduce((a, c) => {
    return a + c.total;
  }, 0);
}
<body>
  <h1> Point of Sale System </h1>

  <form id="myForm">
    This is the point of sale program for a store selling winter clothes.

    <ul>
      <li>Product Code 1: “Winter Hat” for $27.50</li>
      <li>Product Code 2: “Warm Coat” for $160.23</li>
      <li>Product Code 3: “Gloves” for $32.99</li>
    </ul>

    <table>
      <tr>
        <td>Enter the Product Code:</td>
        <!--Input field for productCode-->
        <td><input id="productCode" type="number" value=""></td>
      </tr>
      <tr>
        <td>Enter the Quantity:</td>
        <!--Input field for quantity-->
        <td><input id="quantity" type="number" value=""></td>
      </tr>
    </table>

    <input type="button" value="Add this item to purchase order" onclick="createList()">

    <ul id="list"> </ul>

    <div id="results"></div>
  </form>


</body>

标签： javascripthtml

解决方案

您应该将总价格作为一个数字放在total:属性中，而不是字符串。由于您放置了一个字符串，因此它连接了字符串而不是添加数字。

let purchases = []
//function to create shopping cart
function createList() {
  let products = ["Winter Hat", "Warm Coat", "Gloves"];
  let prices = [27.50, 160.23, 23.99];

  let productCode = document.getElementById("productCode").value;
  let quantity = document.getElementById("quantity").value;

  let message = " Product Code or Quantity invalid. Enter values from list above.";
  // message to alert if code is invalid
  if (productCode < 1 || productCode > 3 || quantity < 1) {
    alert(message);
  }

  purchases.push({
    product: products[productCode - 1],
    quantity: quantity,
    total: prices[productCode - 1] * quantity
  });
  // appends list to 
  let list = document.getElementById("list");
  // cals for every item
  list.innerHTML = purchases.map(p => {
    return "<li>" + p.product + " (Quantity: " + p.quantity + ") Cost: $" + p.total.toFixed(2) + "</li>";
  }).join("");

  //
  document.getElementById("results").innerText = "Total Cost: $" + purchases.reduce((a, c) => {
    return a + c.total;
  }, 0).toFixed(2);
}
<body>
  <h1> Point of Sale System </h1>

  <form id="myForm">
    This is the point of sale program for a store selling winter clothes.

    <ul>
      <li>Product Code 1: “Winter Hat” for $27.50</li>
      <li>Product Code 2: “Warm Coat” for $160.23</li>
      <li>Product Code 3: “Gloves” for $32.99</li>
    </ul>

    <table>
      <tr>
        <td>Enter the Product Code:</td>
        <!--Input field for productCode-->
        <td><input id="productCode" type="number" value=""></td>
      </tr>
      <tr>
        <td>Enter the Quantity:</td>
        <!--Input field for quantity-->
        <td><input id="quantity" type="number" value=""></td>
      </tr>
    </table>

    <input type="button" value="Add this item to purchase order" onclick="createList()">

    <ul id="list"> </ul>

    <div id="results"></div>
  </form>


</body>

顺便说一句，通常使用对象数组而不是每个属性的单独数组更简单，例如

let products = [
    {product: "Winter Hat", price: 27.50},
    {product: "Warm Coat", price: 160.23},
    {product: "Glovest", price: 23.99}
];

对于多个数组，它们很容易不同步，但对于对象数组来说这几乎是不可能的。

推荐阅读