如何根据用户的输入将数组中的项目附加到列表中答案

【问题标题】：How To Append Items From An Array to a List Based off User's Input如何根据用户的输入将数组中的项目附加到列表中
【发布时间】：2021-03-09 22:37:54
【问题描述】：

我尝试编写的程序类似于购物车。有一个带有两个输入框的表单供用户输入变量productCode 和quantity。单击按钮时，函数function createList() 应该运行并显示如下图所示的输出。每次单击按钮时，我都尝试将每个项目附加到 <ul id="list">，并且每次都将发送到<div id="results> 的sum 更新。我不确定如何为作业编写代码。我没有收到语法错误，但没有任何显示。任何帮助和意见将不胜感激。

输出示例

到目前为止键入的代码

<script>

        //function to create shopping cart
        function createList(){
            
            let products = ["Winter Hat", "Warm Coat", + "Gloves"];
            let prices = [27.50, 160.23, 23.99];
            let sum = 0;
            let li ="";
            let list = document.getElementById("list");
            let productCode = document.getElementById("productCode").value;
            let quantity = document.getElementById("quantity").value;

            let message = " Product Code or Quantity invalid. Enter values from list above.";

            // for loop to display the appropriate data from appropriate array
            for (let i =0; i < products.length; i++) {
                if (products[i]==productCode) {
                message = products[i] + "(Quantity " +quantity +")" + prices[i];
                sum+= prices[i];

                //creates list element and appends element to id="list"
                li = document.createElement("li");
                li.innerHTML = message;
                list.appendChild(li);
            }
        }   
            // sum is displayed to empty div "results"
            document.getElementById("results").innerHTML = sum;
    }


    </script>

<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>
    </form>
    
    <input type="button" value="Add this item to purchase order" onclick="createList()">

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

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

【问题讨论】：

您需要检查许多错误，但您的createList 函数永远不会被执行。将onclick="createList"更改为onclick="createList()"，
嗯，好的。抱歉，我只是自己学习如何做。我修复了错误。只显示sum，但它是0。我还犯了什么其他错误？
这里将是不必要的讨论，让我们将此讨论移至chat
对不起。因为我的声望不够高所以不让我聊天

标签： javascript html arrays function

【解决方案1】：

let productCode = document.myelement.productCode.value;
let quantity = document.myelement.productCode.value;

document.myelement 不涉及任何内容。相反，它会是document.getElementById("productCode").value，等等。

【讨论】：

好的，谢谢，我已经更新了那部分。什么都没有输出。你知道为什么吗？
您的最后一个错误是您将products[i] 与productCode 进行比较。例如，这转换为 "Winter Hat" === 1，其评估结果为 false。相反，您想检查i === productCode - 1

【解决方案2】：

我想指出几件事 -

添加项的onclick事件缺少函数括号-

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

在代码中没有产品代码数组的声明，您的产品代码输入框是数字，但您将其与字符串类型的产品数组中的值匹配

if (products[i]==productCode)

尝试先解决这些问题，然后重试。

【讨论】：

【解决方案3】：

我认为这是一个使用map和reduce函数的好问题

const purchases = []; // list of products that are purchased so far

function createList() {
  const products = ["Winter Hat", "Warm Coat", +"Gloves"];
  const prices = [27.50, 160.23, 23.99];

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

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

  purchases.push({
    product: products[productCode - 1],
    quantity: quantity,
    sum: prices[productCode - 1] * quantity
  }); // add the selected product into the purchases list, with its sum


  // once we have all the purchases, we use map function to create
  // the li items as a list and use join to convert it to a string
  // set the string as the innerHTML of ul
  const list = document.getElementById("list");
  list.innerHTML = purchases.map(p => {
    return "<li>" + p.product + " (Quantity: " + p.quantity + ") Cost: " + p.sum + "</li>";
  }).join("");

  // sum up all the purchases
  document.getElementById("results").innerText = purchases.reduce((a, c) => {
    return a + c.sum;
  }, 0);
}

【讨论】：

你能解释一下你是如何使用map和push函数的吗？
@GatorGat，我在代码中添加了一些文档。