Whenever I run this, I want there to be a continued list with the output, but when I select a new item (such as Umbrella or Raincoat), it replaces the existing one. Any help is appreciated, Thanks.
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>Your main problem is you are overwriting the "result" contents each time. Append instead. Also don't use parallel arrays when an array of objects will do.
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