如何在具有无限数量输入的表单上创建 'submit' 选项？

Question

我正在尝试创建一个 'calculator'，您也可以在其中添加输入的数量，这样您就可以输入任意数量的输入。提交时，它应该显示 all 输入的附加值 - 但是，我只能让它显示最后一个输入的值。我还希望将 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

看看这个~

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;
}

<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>

如何在具有无限数量输入的表单上创建 'submit' 选项？

How do I make a 'submit' option on a form that has an unlimited number of inputs?

html

javascript

calculator

live