Question

我试图修复我的时间表脚本以计算其余时间。现在它只计算第1天的输入和输出持续时间。不确定如何获得第2天加数据来计算。

我所遇到的另一个问题是无法编辑第1天，因为当我添加新天时我不再能够计算持续时间。但是如果我回到第1天并删除额外的天数，那么我就可以再次编辑和计算。

P.S。细分是我所指的日子。

＆＃13;

		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;
			}
		}

＆＃13;

	<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 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;

Answer 1

您缺少实际的segments_num元素：

  <div id='segments_num' value=1></div>

HTML中的

修复此问题。

我还将addNumSeg();放入事件监听器中以避免异步事件处理问题。

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 #
addNumSeg();
			});
		})


		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></div>
	<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 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 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>

计算并自动填充动态元素

1 个答案: