在提交表单之前尝试从动态元素中获取数据以计算持续时间。
如图所示,我有 第1天工作正常,但第2天不计算小时数。不知道为什么会这样。一旦我点击添加另一天但对如何修复第一个问题感兴趣,也无法编辑第1天。
var template;
var numOfSegments = 1;
window.addEventListener('load', function() {
template = document.querySelector("#wrapper").innerHTML;
document.querySelector("#more_fields").addEventListener("click", function(e) {
e.preventDefault(); // tell the browser to not send the form
document.getElementById('wrapper').insertAdjacentHTML('beforeend', template); // add next segment
numOfSegments = document.querySelectorAll("div.segment").length;
document.querySelector("div.segment:last-of-type > label").innerHTML = "Day " + (numOfSegments) + ":"; //Updates Segment #
});
})
function deleteMe() {
if (numOfSegments > 1) {
var btn = document.querySelector("#wrapper > div.segment:last-of-type");
btn.remove();
event.preventDefault();
}
}
function addNumSeg() {
var elem = document.getElementById("segments_num");
elem.value = ++numOfSegments;
}
function subtractNumSeg() {
var elem = document.getElementById("segments_num");
if (numOfSegments > 1) {
elem.value = --numOfSegments;
}
}

<div id='segments_num' value=1 >
<form id="seg" oninput="z.value=parseInt(segout.value)-parseInt(segin.value)">
<div id="room_fileds">
<div class="content" id="wrapper">
<div class="segment">
<label id="seg[]" style="margin:0 0 10px 60px;display: inline;">Day 1:</label>
<div class="form-group" style="display: inline;">
<label id=seg-in[] style="margin:0 0 10px 35px;display: inline;">IN:</label>
<input class="form-control seg_in" id="segin" type="text" style="margin:0 0 10px 5px;Width:15%;display: inline;">
</div>
<div class="form-group" style="display: inline;">
<label id=seg-out[] style="margin:0 0 10px 35px;display: inline;">OUT:</label>
<input class="form-control seg_out" id="segout" type="text" style="margin:0 0 10px 5px;Width:15%;display: inline;">
</div>
<div class="form-group" style="display: inline;">
<label id="seg-dur[]" style="margin:0 0 10px 35px;display: inline;">Duration:</label>
<output class="form-control seg_out" form="seg" name="z" for="segin segout" style="margin:0 0 10px 5px;Width:15%;display:inline"; readonly></output>
</div>
</div>
</div>
</div>
</div>
<div style="text-align:right;">
<div style="display:inline;text-align: right;">
<button onclick="deleteMe(); subtractNumSeg();" type="button" style="height: 25px;width:14px;" id="less_fields">-</button>
</div>
<div style="display:inline;text-align: right;">
<button onclick="addNumSeg();" type="button" style="height: 25px;width:14px;" id="more_fields">+</button>
</div>
</div>
<br><br>
<button type="button" class="btn btn-default" id="formSubmit">Submit</button>
&#13;