如何在具有无限数量输入的表单上创建“提交”选项？

Question

我正在尝试创建一个“计算器”，您可以在其中添加输入量，这样您就可以输入任意数量的输入。在提交时，它应显示所有输入的附加值 - 但是，我只能显示最后一个输入的值。另外，我希望将x输入的值乘以x输入的数量，写入数字输入 - 我该如何去做？

var prices= new Array();
prices["none"]=0;
prices["burger"]=10;
prices["fish"]=20;
prices["steak"]=30;

var i = 0;

function createInput() {
    i++;
    
    var container = document.getElementById("newInputs");
    
    var select = document.createElement("select");
    select.setAttribute("id", "select" + i);
    container.appendChild(select);
    
    var none = document.createElement("option");
    none.setAttribute("value", "none");
    none.text = "";
    select.add(none);
    
    var one = document.createElement("option");
    one.setAttribute("value", "burger");
    one.text = "Burger";
    select.add(one);
    
    var two = document.createElement("option");
    two.setAttribute("value", "fish");
    two.text = "Fish";
    select.add(two);
    
    var three = document.createElement("option");
    three.setAttribute("value", "steak");
    three.text = "Steak";
    select.add(three);
    
    var amount = document.createElement("input");
    amount.setAttribute("id", "amount" + i);
    amount.setAttribute("type", "number")
    container.appendChild(amount);
    
    return i;
}

function getPrice() {
    var price = 0;
    var theForm = document.forms["form"];
    var items = theForm.elements["select" + i];
    price = prices[items.value];
    return price;
}

function getTotal() {
    var totalPrice = getPrice();
    document.getElementById('total').innerHTML = "£" + totalPrice;
}

<form id="form">
        <select id="select0">
            <option value="none"></option>
            <option value="burger">Burger</option>
            <option value="fish">Fish</option>
            <option value="steak">Steak</option>
        </select>
        <input type="number" id="amount1">
        <div id="newInputs">
        
        </div>
        <input type="button" onclick="createInput()" value="More Inputs!">
        <input type="button" onclick="getTotal()" value="Submit!">
    </form>
    <p id="total">You haven't got a total yet</p>

这可能是我犯的一个非常愚蠢的错误，但无论如何都要感谢帮助！

Answer 1

检查出来〜

＆＃13;

＆＃13;

var prices= new Array();
prices["none"]=0;
prices["burger"]=10;
prices["fish"]=20;
prices["steak"]=30;

var i = 0;

function createInput() {
    i++;
    
    var container = document.getElementById("newInputs");
    
    var select = document.createElement("select");
    select.setAttribute("id", "select" + i);
    container.appendChild(select);
    
    var none = document.createElement("option");
    none.setAttribute("value", "none");
    none.text = "";
    select.add(none);
    
    var one = document.createElement("option");
    one.setAttribute("value", "burger");
    one.text = "Burger";
    select.add(one);
    
    var two = document.createElement("option");
    two.setAttribute("value", "fish");
    two.text = "Fish";
    select.add(two);
    
    var three = document.createElement("option");
    three.setAttribute("value", "steak");
    three.text = "Steak";
    select.add(three);
    
    var amount = document.createElement("input");
    amount.setAttribute("id", "amount" + i);
    amount.setAttribute("type", "number")
    container.appendChild(amount);
    
    return i;
}

function getPrice() {
    var price = 0, ix, ixLen, value, type;
    var newInputs = document.getElementById('newInputs');
    
    price += (prices[document.getElementById('select0').value || 'none']) *     
             (document.getElementById('amount0').value || 0);
    for(ix = 0, ixLen = newInputs.children.length; ix < ixLen; ix += 2){
        type = newInputs.children[ix].value || 'none';
        value = newInputs.children[ix+1].value || 0;
        price += prices[type] * +value;
    }
    
    return price;
}

function getTotal() {
    var totalPrice = getPrice();
    document.getElementById('total').innerHTML = "£" + totalPrice;
}

＆＃13;

<form id="form">
	<select id="select0">
		<option value="none"></option>
		<option value="burger">Burger</option>
		<option value="fish">Fish</option>
		<option value="steak">Steak</option>
	</select>
	<input type="number" id="amount0">
	<div id="newInputs">
	
	</div>
	<input type="button" onclick="createInput()" value="More Inputs!">
	<input type="button" onclick="getTotal()" value="Submit!">
</form>
<p id="total">You haven't got a total yet</p>

＆＃13;

＆＃13;

＆＃13;