在一個簡單的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> 

目前的形式只允許一個長/寬/深度是進入，我試圖找出如何添加一些東西，讓我點擊+添加字段按鈕，彈出另一組長度/寬度/深度框，供他們使用。最終結果會將所有字段添加在一起。

謝謝！

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 = "" 
    }