bugfix> javascript > 投稿

私のプログラムが行うことになっているのは、ショッピングカートとしての機能です。入力ボックスで、ユーザーは productCode そしてその quantity そして彼らがクリックすると button フォーム上で、プログラムは、追加された製品、注文された数量、数量の合計の動的リストを作成し、 total 毎回。私が抱えているエラーは、私の関数が適切な出力を表示していないことです。私と私の経験不足を許してください、しかし私は使用することを選びました map() そして push() 他にこれをコーディングする方法がわからなかったので。どんな助けでもいただければ幸いです。

現在/間違った出力

正しい/望ましい出力

現在のコード

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>

回答 2 件
  • 合計金額を数値として入力する必要があります 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}
    ];
    
    

    複数の配列を使用すると、同期が外れるのは簡単ですが、オブジェクトの配列ではほとんど不可能です。

  • 私はあなたに評価してもらいたいいくつかの変更を加えました:

    製品オブジェクトからテキストを削除します。つまり、次のように、プロパティ全体を操作の価格のみに保持します。

    purchases.push({
        product: products[productCode - 1],
        quantity: quantity,
        total: prices[productCode - 1] * quantity
    });
    
    

    ラベルを追加します Total Price: $" 内部テキスト割り当てへ:

    document.getElementById("results").innerText = "Total Price: $" + purchases.reduce((a, c) => {
        return a + c.total;
    }, 0);
    
    

    それは出力をきれいに保つはずです、要約すると、何が悪かったのはそれです reduce 関数は、プロパティの合計をテキストとして評価し、次々に連結していました。

あなたの答え