为什么日期不按onchange值递增

Question

我有三个输入字段，我想通过单击按钮来显示值 我很好地收到了该领域的价值观。 问题是，如果他们增加字段，那么基于我的日期也应该增加。我有两个日期字段，第一个应该通过给这三个输入字段赋值来增加。第二，将使该总值的范围。 这是我的代码。

window.sum = () => document.getElementById('get_my_value').value =
	Array.from(
		document.querySelectorAll('#txt1,#txt2,#txt3')
	).map(e => parseInt(e.value) || 0)
	.reduce((a, b) => a + b, 0)

function increaseValueFirst() {
	// body... 
	var value = parseInt(document.getElementById('txt1').value, 10);
	value = isNaN(value) ? 0 : value;
	value++;
	document.getElementById('txt1').value = value;

}

function decreaseValueFirst() {
	// body... 
	var value = parseInt(document.getElementById('txt1').value, 10);
	value = isNaN(value) ? 0 : value;
	value < 1 ? value = 1 : '';
	value--;
	document.getElementById('txt1').value = value;
}

function increaseValueSec() {
	// body... 
	var value = parseInt(document.getElementById('txt2').value, 10);
	value = isNaN(value) ? 0 : value;
	value++;
	document.getElementById('txt2').value = value;

}

function decreaseValueSec() {
	// body... 
	var value = parseInt(document.getElementById('txt2').value, 10);
	value = isNaN(value) ? 0 : value;
	value < 1 ? value = 1 : '';
	value--;
	document.getElementById('txt2').value = value;
}

function increaseValueThird() {
	// body... 
	var value = parseInt(document.getElementById('txt3').value, 10);
	value = isNaN(value) ? 0 : value;
	value++;
	document.getElementById('txt3').value = value;

}

function decreaseValueThird() {
	// body... 
	var value = parseInt(document.getElementById('txt3').value, 10);
	value = isNaN(value) ? 0 : value;
	value < 1 ? value = 1 : '';
	value--;
	document.getElementById('txt3').value = value;
}
function dateRangeSelector() {
	var days = 1;
	var date = new Date($("#start_date").val()),
		days = parseInt($("#get_my_value").val(), 10);
	console.log("days", days);

	if (!isNaN(date.getTime())) {
		date.setDate(date.getDate() + days);

		$("#end_date").val(date.toInputFormat());
	} else {
		alert("Invalid Date");
	}
}


Date.prototype.toInputFormat = function () {
	var yyyy = this.getFullYear().toString();
	var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
	var dd = this.getDate().toString();
	return yyyy + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + (dd[1] ? dd : "0" + dd[0]); // padding
};

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
   $( function() {
     $( "#start_date" ).datepicker();  
   } );
   $( function() {
     $( "#end_date" ).datepicker();
   } );
</script>

<div class="row top-buffer">
                        <div class="form-group">
                           <div class="col-sm-2">
                              <label>Choose Date</label>
                              <input type="text" class="form-control" id="start_date" name="start_date"onchange="dateRangeSelector()" value="select date">
                           </div>
                           <div class="col-sm-1">
                              <label>Night</label>
                              <input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()">
                           </div>
                           <div class="col-sm-2">
                              <label>Returning Date</label>
                              <input type="text" class="form-control" id="end_date" name="end_date" value="Returning Date">
                           </div>
                        </div>
                     </div>
                     
            <div class="form-group">
   <div class="col-xs-8">
      <!-- here code is responsible for incrementing the values -->
      <table class="table">
         <thead>
            <tr>
               <th scope="col">Serial No</th>
               <th scope="col">Hotels</th>
               <th scope="col">(+) Nights</th>
               <th scope="col">(-) Nights</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <th scope="row">1</th>
               <td><input type="text" id="txt1" value="1"min="1" onkeyup="sum()" /></td>
               <td>
                  <input type="button" value="+" id="additionofcitynights" value="additionofcitynights" class="thisuseforaddandminus" onclick="increaseValueFirst(); sum();">
               </td>
               <td><input type="button" value="-" id="substractionofcitynights" value="substractionofcitynights" class="thisuseforaddandminus" onclick="decreaseValueFirst(); sum();"></td>
            </tr>
            <tr>
               <th scope="row">2</th>
               <td><input type="text" id="txt2" value="1"min="1" onkeyup="sum()" style="margin-right:10px;" /></td>
               <td><input type="button" value="+" id="additionofcitynights" value="additionofcitynights" class="thisuseforaddandminus" onclick="increaseValueSec(); sum();"></td>
               <td><input type="button" value="-" id="substractionofcitynights" value="substractionofcitynights" class="thisuseforaddandminus" onclick="decreaseValueSec(); sum();"></td>
            </tr>
            <tr>
               <th scope="row">2</th>
               <td><input type="text" id="txt3" value="1"min="1" onkeyup="sum()" /></td>
               <td><input type="button" value="+" id="additionofcitynights" value="additionofcitynights" class="thisuseforaddandminus" onclick="increaseValueThird(); sum();"></td>
               <td><input type="button" value="-" id="substractionofcitynights" value="substractionofcitynights" class="thisuseforaddandminus" onclick="decreaseValueThird(); sum();"></td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

如您所见，有四个输入字段，可通过单击按钮来增加值。其中三个仅用于其目的，右上方的一个将计算所有这些。 问题在于日期应该通过采用右上一个输入字段的值（称为Night）来增加。第二个将显示返回日期意味着要计算夜晚输入字段的所有值，并根据第一个日期确定最后一个日期的范围。 当您通过自己在右上角的输入字段中输入值时，您将获得输出，但是通过单击按钮递增就无法实现。