Javascript動態輸入計算

Question

我有一個動態的表單，它計算持續時間。我可以通過點擊添加新行來插入行。 我的問題從無法計算的第二行開始，因爲它是動態的。你能幫我解決這個問題嗎？

感謝

$(document).ready(function() { 
 
    var max_fields = 10; //maximum input boxes allowed 
 
    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
 
    var add_button = $(".add_field_button"); //Add button ID 
 
    var FieldCount = 1; //to keep track of text box added 
 
    var x = 1; //initlal text box count 
 
    $(add_button).click(function(e) { //on add input button click 
 
    e.preventDefault(); 
 
    if (x < max_fields) { //max input box allowed 
 
     x++; //text box increment 
 
     FieldCount++; 
 
     wrapper.append('From &rarr; <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal()" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal()" /> | To &rarr; <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal()" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal()" /> | Result &rarr; <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box 
 
    } 
 
    }); 
 

 
    wrapper.on("click", ".remove_field", function(e) { //user click on remove text 
 
    e.preventDefault(); 
 
    $(this).parent('div').remove(); 
 
    x--; 
 
    }) 
 
}); 
 

 
function cal() { 
 
    var fromhours = parseInt(document.getElementById('fromhours').value) * 60; 
 
    var fromminutes = parseInt(document.getElementById('fromminutes').value); 
 
    var tohours = parseInt(document.getElementById('tohours').value) * 60; 
 
    var tominutes = parseInt(document.getElementById('tominutes').value); 
 
    var resultfrom = fromhours + fromminutes; 
 
    var resultto = tohours + tominutes; 
 
    var result = resultto - resultfrom; 
 
    var hourresult = parseInt(result/60); 
 
    var minutesresult = (result - (hourresult * 60)); 
 
    document.getElementById('resulthours').value = '0' + hourresult.toFixed(0); 
 
    document.getElementById('resultminutes').value = ('0' + minutesresult).slice(-2); 
 

 
}

input[type=text] { 
 
    width: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" /> 
 
<br />From &rarr; 
 
<input type="text" name="fromhours" id="fromhours" onblur="cal()" />: 
 
<input type="text" name="fromminutes" id="fromminutes" onblur="cal()" />| To &rarr; 
 
<input type="text" name="tohours" id="tohours" onblur="cal()" />: 
 
<input type="text" name="tominutes" id="tominutes" onblur="cal()" />| Result &rarr; 
 
<input type="text" name="resulthours" id="resulthours" />: 
 
<input type="text" name="resultminutes" id="resultminutes" /> 
 
<br /> 
 
<br /> 
 
<div class="input_fields_wrap"></div>

我的問題是，從第二排，我不能讓我的結果工作

Answer 1

您需要通過添加X指當前元素行ID如下

wrapper.append('From → 
<input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal(x)" /> ... 


    function cal(x) { 
     var fromhours = parseInt(document.getElementById('fromhours'+x).value) * 60; 
    ... 

$(document).ready(function() { 
 
    var max_fields = 10; //maximum input boxes allowed 
 
    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
 
    var add_button = $(".add_field_button"); //Add button ID 
 
    var FieldCount = 1; //to keep track of text box added 
 
    var x = 1; //initlal text box count 
 
    $(add_button).click(function(e) { //on add input button click 
 
    e.preventDefault(); 
 
    if (x < max_fields) { //max input box allowed 
 
     x++; //text box increment 
 
     FieldCount++; 
 
     wrapper.append('From &rarr; <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal('+FieldCount +')" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal('+FieldCount +')" /> | To &rarr; <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal('+FieldCount +')" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal('+FieldCount +')" /> | Result &rarr; <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box 
 
    } 
 
    }); 
 

 
    wrapper.on("click", ".remove_field", function(e) { //user click on remove text 
 
    e.preventDefault(); 
 
    $(this).parent('div').remove(); 
 
    x--; 
 
    }) 
 
}); 
 

 
function cal(x) { 
 
x=x||""; 
 
    var fromhours = parseInt(document.getElementById('fromhours'+x).value) * 60; 
 
    var fromminutes = parseInt(document.getElementById('fromminutes'+x).value); 
 
    var tohours = parseInt(document.getElementById('tohours'+x).value) * 60; 
 
    var tominutes = parseInt(document.getElementById('tominutes'+x).value); 
 
    var resultfrom = fromhours + fromminutes; 
 
    var resultto = tohours + tominutes; 
 
    var result = resultto - resultfrom; 
 
    var hourresult = parseInt(result/60); 
 
    var minutesresult = (result - (hourresult * 60)); 
 
    document.getElementById('resulthours'+x).value = '0' + hourresult.toFixed(0); 
 
    document.getElementById('resultminutes'+x).value = ('0' + minutesresult).slice(-2); 
 

 
}

input[type=text] { 
 
    width: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" /> 
 
<br />From &rarr; 
 
<input type="text" name="fromhours" id="fromhours" onblur="cal()" />: 
 
<input type="text" name="fromminutes" id="fromminutes" onblur="cal()" />| To &rarr; 
 
<input type="text" name="tohours" id="tohours" onblur="cal()" />: 
 
<input type="text" name="tominutes" id="tominutes" onblur="cal()" />| Result &rarr; 
 
<input type="text" name="resulthours" id="resulthours" />: 
 
<input type="text" name="resultminutes" id="resultminutes" /> 
 
<br /> 
 
<br /> 
 
<div class="input_fields_wrap"></div>

Answer 2

我不是JS專家，但可能有一些處理這個事實，你是指同一個ID屬性下的行？據我所見，你沒有向代碼指定要計算哪一行。

見@Bellash答案的可能解決方案

Answer 3

你忘了傳遞cal()函數中的fieldCount數字，並將其與字段id串聯，因此cal()函數始終使用第一行文本字段。 我已更正您的代碼段。

$(document).ready(function() { 
 
    var max_fields = 10; //maximum input boxes allowed 
 
    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
 
    var add_button = $(".add_field_button"); //Add button ID 
 
    var FieldCount = 1; //to keep track of text box added 
 
    var x = 1; //initlal text box count 
 
    $(add_button).click(function(e) { //on add input button click 
 
    e.preventDefault(); 
 
    if (x < max_fields) { //max input box allowed 
 
     x++; //text box increment 
 
     FieldCount++; 
 
     wrapper.append('From &rarr; <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> | To &rarr; <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> | Result &rarr; <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box 
 
    } 
 
    }); 
 
    wrapper.on("click", ".remove_field", function(e) { //user click on remove text 
 
    e.preventDefault(); 
 
    $(this).parent('div').remove(); 
 
    x--; 
 
    }) 
 
}); 
 

 
function cal(fieldCount) { 
 
    console.log(arguments); 
 
    var fromhours = parseInt(document.getElementById('fromhours' + fieldCount).value) * 60; 
 
    var fromminutes = parseInt(document.getElementById('fromminutes' + fieldCount).value); 
 
    var tohours = parseInt(document.getElementById('tohours' + fieldCount).value) * 60; 
 
    var tominutes = parseInt(document.getElementById('tominutes' + fieldCount).value); 
 
    var resultfrom = fromhours + fromminutes; 
 
    var resultto = tohours + tominutes; 
 
    var result = resultto - resultfrom; 
 
    var hourresult = parseInt(result/60); 
 
    var minutesresult = (result - (hourresult * 60)); 
 
    document.getElementById('resulthours' + fieldCount).value = '0' + hourresult.toFixed(0); 
 
    document.getElementById('resultminutes' + fieldCount).value = ('0' + minutesresult).slice(-2); 
 

 
}

input[type=text] { 
 
    width: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" /> 
 
<br />From &rarr; 
 
<input type="text" name="fromhours" id="fromhours1" onblur="cal(1)" />: 
 
<input type="text" name="fromminutes" id="fromminutes1" onblur="cal(1)" />| To &rarr; 
 
<input type="text" name="tohours" id="tohours1" onblur="cal(1)" />: 
 
<input type="text" name="tominutes" id="tominutes1" onblur="cal(1)" />| Result &rarr; 
 
<input type="text" name="resulthours" id="resulthours1" />: 
 
<input type="text" name="resultminutes" id="resultminutes1" /> 
 
<br /> 
 
<br /> 
 
<div class="input_fields_wrap"></div>

Answer 4

你必須得到的唯一ID和使用，在你的計算。在JS我有上KEYUP替代功能並增加了一個聲明，以防止NaN

JS

$(document).ready(function() { 
    var max_fields = 10; //maximum input boxes allowed 
    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
    var add_button = $(".add_field_button"); //Add button ID 
    var FieldCount = 1; //to keep track of text box added 
    var x = 1; //initlal text box count 
    $(add_button).click(function(e) { //on add input button click 
    e.preventDefault(); 
    if (x < max_fields) { //max input box allowed 
     x++; //text box increment 
     FieldCount++; 
     wrapper.append('From &rarr; <input type="text" class="cal" name="fromhours" id="fromhours' + FieldCount + '" /> : <input type="text" class="cal" name="fromminutes" id="fromminutes' + FieldCount + '" /> | To &rarr; <input type="text" class="cal" name="tohours" id="tohours' + FieldCount + '" /> : <input type="text" class="cal" name="tominutes" id="tominutes' + FieldCount + '" /> | Result &rarr; <input type="text" class="cal" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" class="cal" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box 
    } 
    }); 

    wrapper.on("click", ".remove_field", function(e) { //user click on remove text 
    e.preventDefault(); 
    $(this).parent('div').remove(); 
    x--; 
    }) 
}); 

$('body').on('keyup', '.cal', function() { 
    var id = $(this).attr('id').substr(-1), 
     fromhours = ~~$('#fromhours' + id).val(), 
     fromminutes = ~~$('#fromminutes' + id).val(), 
     tohours = ~~$('#tohours' + id).val(), 
     tominutes = ~~$('#tominutes' + id).val(); 

    if (fromhours != '' && fromminutes != '' && tohours != '' && tominutes != '') { 
     var resultfrom = (fromhours * 60) + fromminutes, 
      resultto = (tohours * 60) + tominutes, 
      result = resultto - resultfrom, 
      hourresult = ~~(result/60), 
      minuteresult = ~~(result - hourresult * 60); 
     $('#resulthours' + id).val(hourresult); 
     $('#resultminutes' + id).val(minuteresult); 
    } 
}); 

HMTL

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" /> 
<br />From &rarr; 
<input type="text" class="cal" name="fromhours" id="fromhours1" />: 
<input type="text" class="cal" name="fromminutes" id="fromminutes1" /> | To &rarr; 
<input type="text" class="cal" name="tohours" id="tohours1" />: 
<input type="text" class="cal" name="tominutes" id="tominutes1" /> | Result &rarr; 
<input type="text" class="cal" name="resulthours" id="resulthours1" />: 
<input type="text" class="cal" name="resultminutes" id="resultminutes1" /> 
<br /> 
<br /> 
<div class="input_fields_wrap"></div>