大家好，希望你做得好。
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 dateRangeSelector() {
var days;
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[0] ? mm : "0" + mm[0]) + "-" + (dd[0] ? dd : "0" + dd[0]); // padding
};
$('.thisuseforaddandminus').click(function(e) {
e.preventDefault();
// fieldName = $(this).attr('data-field'); //there is no attribute like this on your html element
// type = $(this).attr('data-type'); //there is no attribute like this on your html element
type = e.target.id == "additionofcitynights" ? "#additionofcitynights" : "#substractionofcitynights";
// var input = $("input[name='" + fieldName + "']"); //just getting the input by its ID
var input = $("#get_my_value");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if (type == '#substractionofcitynights') {
if (currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
} else if (type == '#additionofcitynights') {
if (currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
}
} else {
input.val(0);
}
});<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script src="<?php echo base_url(); ?>assets/js/addfields.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="container">
<div class="row">
<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()" readonly>
</div>
<div class="col-sm-2">
<label>Returning Date</label>
<input type="text" class="form-control input-number" id="end_date" name="end_date" value="Returning Date">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-8">
<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>
</tbody>
</table>
</div>
</div>
</div>
<!-- ending here displaying options -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
首先，我每天增加值并显示一个输入字段。 第二个是即时价值，我试图在夜间栏中显示。 但它增加了2。
答案 0 :(得分：0)
您要递增#get_my_value中的值两次。首先，您在$('.thisuseforaddandminus').click中添加它。更改值后，它将在输入上调用.change()，执行onchange="dateRangeSelector()"，然后dateRangeSelector()再次增加值。