簡單的Javascript計算器中的“添加字段”

Question

我在網站上尋求幫助的計算器。 該公司銷售地膜，並有一個地膜計算器，客戶可以使用該計算器來計算他們大概需要訂購多少個地膜。

當前，該表格允許您輸入覆蓋床的長度，寬度和深度，並輸出您需要訂購多少立方碼的覆蓋物。

有人問我是否可以在表單中添加零件，以允許用戶“向表單中添加字段”。 換句話說，只需在其中添加另一個長度/寬度/深度部分，最終結果將兩者加在一起。

這是我到目前為止的內容：

HTML：

        <form name="mulchForm" class="contact-form clearfix">

            <p>Enter Mulch Bed Length</p>

            <p>
            <input type="text" class="left" name="length" placeholder="Enter length (in feet)" />
            </p>
            <div class="clearfix"></div>
            <p>Enter Mulch Bed Width</p>

            <p>
            <input type="text" class="left" name="width" placeholder="Enter width (in feet)" />
            </p> 
            <div class="clearfix"></div>
            <p>Enter Mulch Bed Depth</p>

            <p>
            <input type="text" class="left" name="depth" placeholder="Enter depth (in inches)" />
            </p> 

            <div class="clearfix"></div>

            <!--Form buttons -->
            <p>
            <input type="button" onClick="calculate();" value="Calculate">

            <input type="button" onClick="mulchForm.reset();" value="Clear Form">
            <div class="clearfix"></div>
            </p> 

            <p>Approximate Number of Cubic Yards of Mulch Needed:</p>
            <p><input type="text" class="left" name="cubicYards" placeholder="Number of cubic yards needed" /></p> 

        </form>

Javascript：

<script type="text/javascript">
    function calculate() {
        document.mulchForm.cubicYards.value = (document.mulchForm.length.value/3) *
                                              (document.mulchForm.width.value/3) *
                                              (document.mulchForm.depth.value/36);
    }
</script>

目前，該表格僅允許輸入一個長度/寬度/深度，我試圖找出如何添加內容的方法，讓我單擊+ Add Field按鈕，該按鈕彈出另一組長度/寬度/深度框，他們使用。 最終結果將所有字段加在一起。

謝謝！

Answer 1

您可以通過多種方法來執行此操作。您可以查看此方法。http://jsfiddle.net/BRNZC/而不是添加更多文本框，而僅保留一個列表和一個總計。 稍微格式化一下，就可以使它看起來很漂亮。.我將其放在表格中，並使列表顯示在表單的右側。

給你一個開始

<div id=list></div>
<div id=total></div>


<input type="button" onClick="add();" value="Add">


   function add() {
       total = (document.mulchForm.length.value / 3) * (document.mulchForm.width.value / 3) * (document.mulchForm.depth.value / 36);
       document.getElementById("list").innerHTML += document.mulchForm.length.value + "x" + document.mulchForm.width.value + "x" + document.mulchForm.depth.value + "=" + total + "<br>"
       runningtotal += total
       document.getElementById("total").innerHTML = "total = " + runningtotal
       document.mulchForm.length.value = ""
       document.mulchForm.width.value = ""
       document.mulchForm.depth.value = ""
   }