Javascript 在动态添加的输入中计算值_Javascript_Html_Arrays_Dynamic

Javascript 在动态添加的输入中计算值

javascript html arrays dynamic

Javascript 在动态添加的输入中计算值,javascript,html,arrays,dynamic,Javascript,Html,Arrays,Dynamic,我正在尝试构建一个公用事业账单计算器，允许用户动态添加额外的行。每条线路将有3个字段：瓦数、每天使用的小时数和瓦数*小时的总和。在第一行，一切都很好，但当我尝试动态添加其他行时，我的代码仍然适用于第一个产品，并给我一个NaN。理想情况下，一旦他们添加了行，我会在底部加总千瓦时。下面是我到目前为止所做的： <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"><

我正在尝试构建一个公用事业账单计算器，允许用户动态添加额外的行。每条线路将有3个字段：瓦数、每天使用的小时数和瓦数*小时的总和。在第一行，一切都很好，但当我尝试动态添加其他行时，我的代码仍然适用于第一个产品，并给我一个NaN。理想情况下，一旦他们添加了行，我会在底部加总千瓦时。下面是我到目前为止所做的：

<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var maxField = 30; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div>Wattage: <input type="text"  name="field_wattage" value="300" size=4 maxlength="4" onchange="product()"> Hours Per Day Used: <select name="field_hour" onchange="product()"><option value="01"> 01</option><option value="02"> 02</option><option value="03"> 03</option><option value="04"> 04</option><option value="05"> 05</option><option value="06"> 06</option><option value="07"> 07</option><option value="08"> 08</option><option value="09"> 09</option><option value="10"> 10</option><option value="11"> 11</option><option value="12"> 12</option><option value="13"> 13</option><option value="14"> 14</option><option value="15"> 15</option><option value="16"> 16</option><option value="17"> 17</option><option value="18"> 18</option><option value="19"> 19</option><option value="20"> 20</option><option value="21"> 21</option><option value="22"> 22</option><option value="23"> 23</option><option value="24"> 24</option></select> Daily Wattage: <INPUT TYPE="text" ID="dailyproduct" NAME="result" VALUE=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"> Remove Line</a></div>'; //New input field html 
var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
    if(x < maxField){ //Check maximum number of input fields
        x++; //Increment field counter
        $(wrapper).append(fieldHTML);
        // Add field html
    }
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
});
});
</script>
    <script type="text/javascript">
      function product()
      {

         var num1 = document.myform.field_wattage.value;
         var num2 = document.myform.field_hour.value;
         var myproduct = parseInt(num1) * parseInt(num2);
         document.getElementById('dailyproduct').value = myproduct;

      }
    </script>
<?php


echo "<br>";
echo "</select>";
echo "<br>";
$dateStart = mktime(0, 0, 0, 03, 01);
$dateEnd = mktime(0, 0, 0, 10, 31);

if (time() < $dateEnd && time() > $dateStart)
// show stuff
echo "You are in Peak Hours";
else
echo "You are in Off Peak Hours";


?>
<body>
<FORM NAME="myform">
<br />
<br />
<br />
<div class="field_wrapper">
<div>
    Wattage: 
    <input type="text" name="field_wattage" value="300" size=4 maxlength="4" onchange="product()">
    </select> Hours Per Day Used: 
    <select name="field_hour" onchange="product()"/>
    <option value="01"> 01</option>
    <option value="02"> 02</option>
    <option value="03"> 03</option>
    <option value="04"> 04</option>
    <option value="05"> 05</option>
    <option value="06"> 06</option>
    <option value="07"> 07</option>
    <option value="08"> 08</option>
    <option value="09"> 09</option>
    <option value="10"> 10</option>
    <option value="11"> 11</option>
    <option value="12"> 12</option>
    <option value="13"> 13</option>
    <option value="14"> 14</option>
    <option value="15"> 15</option>
    <option value="16"> 16</option>
    <option value="17"> 17</option>
    <option value="18"> 18</option>
    <option value="19"> 19</option>
    <option value="20"> 20</option>
    <option value="21"> 21</option>
    <option value="22"> 22</option>
    <option value="23"> 23</option>
    <option value="24"> 24</option>
    </select>
    Daily Wattage: 
    <INPUT TYPE="text" ID="dailyproduct" NAME="dailyproduct" VALUE=""/>
    <INPUT TYPE="button" NAME="button" Value="=" onClick="product()"/>
    <a href="javascript:void(0);" class="add_button" title="Add field"> Add Line</a>
</div>
</div>
</FORM>
</div>
</body>
</html>


$（文档）.ready（函数（）{
var maxField=30；//输入字段增量限制
var addButton=$（'.add_button'）；//添加按钮选择器
var wrapper=$（'.field_wrapper'）；//输入字段wrapper
var fieldHTML='瓦数：每天使用的小时数：01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24天瓦数：'；//新输入字段html
var x=1；//初始字段计数器为1
$（添加按钮）。单击添加按钮后，单击（函数（）{//）
如果（x




瓦数：
每天使用小时数：
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
每日瓦数：

我在这里搜索了一上午，没有找到任何能描述我的问题的东西。提前感谢。

我在下面创建了一个工作示例。正如我在评论中所说的，您是按名称引用字段，当页面上有同名字段时，这不起作用

要以更现代的方式解决问题，您应该使用并确定事件中要更新的字段。在本例中，我编写了一个事件来处理

select

和

input

更改，然后使用jQuery的方法帮助我找到需要更新的字段

$（文档）.ready（函数（）{
var maxField=30；//输入字段增量限制
var addButton=$（'.add_button'）；//添加按钮选择器
var wrapper=$（'.field_wrapper'）；//输入字段wrapper
var fieldHTML='瓦数：每天使用的小时数：01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24天瓦数：'；//新输入字段html
var x=1；//初始字段计数器为1
$（添加按钮）。单击添加按钮后，单击（函数（）{//）
如果（x



瓦数：
每天使用小时数：
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
每日瓦数：
总数：
问题在于行document.myform.field\u wattage.value。一旦页面上有多行document.myform.field\u wattage
返回多个项目，因此无法从中获取值。您应该学习如何使用浏览器的调试器，因为这很容易找到。正如dave所说，您有两个名为field_wattage的输入，因此document.myform.field_wattage返回两个输入的HTMLCollection。集合没有value属性，因此num1设置为undefined。当用于计算myproduct时，结果是NaN。还有一个孤立的结束标记，没有开始标记。那么我应该怎么做才能绕过它？有没有可能将field_wattage/field_hour更改为一个数组，并使其与一些迭代循环一起工作？感谢Dave简洁的回答。我的理解是：我们正在添加一个onchange事件，然后在最新的div中按fieldname搜索，然后通过.val赋值？难道我不应该在这一页的末尾做同样的事情，用一个和得到我的总瓦特数吗？