我有三个文本字段,每个字段都有用于增加或减少值的按钮,最后一个文本字段将显示每个字段值的计算。
一切正常,但问题是。每当我在物理上将值添加到这三个输入字段中时,它就会获取并显示该值。 首先是亲->但是,只要我试图通过单击按钮来增加价值,它就不会显示价值。
second pro->默认情况下会在每个文本字段中添加值,它们应将最终计算出的值显示在我的第四个文本字段中 但是直到我触摸任何文本字段,它都不会在同一位置显示计算的值。
请帮助我,这真的很需要。这是我的源代码。
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;
}
<?php
$firstvalue = 1;
$secondvalue = 1;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<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>
</head>
<body>
<div class="row">
<div class="form-group">
<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>
</div>
<input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst()">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst()">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec()">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec()">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird()">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird()">
</div>
</div>
</div>
</body>
</html>
现在,您可以通过单击按钮来查看是否有作用,但是直到您实际添加值后,它才起作用。
第二个在右上角,是最终计算出的文本字段,它显示了合计值,默认情况下,在您添加或单击每个文本字段中的任何一个之前,它也不显示值。
提前谢谢。
答案 0 :(得分:0)
您要在文本框上的sum()
事件上调用keyup
函数。当您通过+/-按钮在文本框中更改值时,keyup
事件不会触发。更改值后,调用sum()
函数。
示例代码:
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;
sum(); // <-- New line added
}