使用带有 HTML 选择框的并行数组时遇到问题答案

【问题标题】：Having trouble using parallel arrays with HTML selection boxes使用带有 HTML 选择框的并行数组时遇到问题
【发布时间】：2021-12-27 23:17:58
【问题描述】：

每当我运行它时，我都希望有一个带有输出的连续列表，但是当我选择一个新项目（例如雨伞或雨衣）时，它会替换现有的。任何帮助表示赞赏，谢谢。

function getTotal() {
  let products = ["Umbrella", "Rain coat", "Swimsuit"];
  let prices = [14.95, 119.99, 40.00];

  let totalPrice = parseFloat(0);
  let output = "<ul>";

  let boxes = document.forms.myform.item.options;
  let quantity = document.myform.quantity.value;

  for (let i = 0; i < products.length; i++) {            
    if (boxes[i].selected) {
      output += "<li>" + products[i] + " (Quantity " + quantity + ") Cost: " + (prices[i] * quantity).toFixed(2) + "</li>";
    }
  }

  output += "</ul>";

  document.getElementById("results").innerHTML = output;
  document.getElementById("totalprice").innerHTML = totalPrice;
}

<ul>
  <li>Product 1: An umbrella costs $14.95</li>
  <li>Product 2: A rain coat costs $119.99</li>
  <li>Product 3: A swimsuit costs $40.00</li>
</ul>

<form name="myform" action="javascript:getTotal()">
  <div>
    Select the item:
    <select name="item">
      <option value="umbrella">Umbrella</option>
      <option value="raincoat">Rain coat</option>
      <option value="swimsuit">Swimsuit</option>
    </select>
  </div>
  <div>
    Enter the quantity: <input type="text" name="quantity">
  </div>

  <input type="submit" value="Add this item to the purchase order.">
</form>

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

【问题讨论】：

标签： javascript html arrays selection

【解决方案1】：

您的主要问题是您每次都覆盖“结果”内容。改为追加。当对象数组可以使用时，也不要使用并行数组。

function getTotal() {
  //Array of products
  let products = [{
      "name": "Umbrella",
      "price": 14.95
    },
    {
      "name": "Rain coat",
      "price": 119.99
    }, {
      "name": "Swimsuit",
      "price": 40.00
    }
  ];



  let totalPrice = parseFloat(0);
  let output = "";

  let boxes = document.forms.myform.item.options;
  let quantity = document.myform.quantity.value;
  //Get the selected value of the drop down
  let selected = document.myform.item.value;

  //Loop through the array
  for (let i = 0; i < products.length; i++) {
    //Looking for a match
    if (products[i].name === selected) {
      //Use a template literal to create our string   
      output =` <li>${products[i].name} (Quantity ${quantity}) Cost: ${(products[i].price * quantity).toFixed(2)}</li>`;
      break;
    }
  }

  //Append the output to the UL
  document.getElementById("results").innerHTML += output;
  document.getElementById("totalprice").innerHTML = totalPrice;
  

}

<ul>
  <li>Product 1: An umbrella costs $14.95</li>
  <li>Product 2: A rain coat costs $119.99</li>
  <li>Product 3: A swimsuit costs $40.00</li>
</ul>

<form name="myform">
  <div>
    Select the item:
    <select name="item">
      <option value="Umbrella">Umbrella</option>
      <option value="Rain coat">Rain coat</option>
      <option value="Swimsuit">Swimsuit</option>
    </select>
  </div>

  <div>
    Enter the quantity: <input type="text" name="quantity">
  </div>

  <input type="button" value="Add this item to the purchase order." onClick="getTotal()">
</form>

<!-- NOTE THE UL NOW HAS THE ID -->
<div><ul id="results"></ul></div>
<div id="totalprice"></div>enter code here

【讨论】：