Cada vez que ejecuto esto, quiero que haya una lista continua con la salida, pero cuando selecciono un elemento nuevo (como Paraguas o Chubasquero), reemplaza al existente. Cualquier ayuda es apreciada, Gracias.
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>Su principal problema es que está sobrescribiendo el contenido del "resultado" cada vez. Añadir en su lugar. Además, no use matrices paralelas cuando una matriz de objetos sea suficiente.
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