文本字段不是通过点击按钮来读取值，而是直到我将值物理地添加到文本字段中

我有三个文本字段，每个字段都有递增或递减值的按钮，最后一个文本字段将显示每个字段值的计算结果。

所有的操作都很好，但问题是，每当我在这三个输入字段中物理地添加一个值时，它就会得到值并显示出来。第一个pro->，但每当我试图通过点击按钮添加值时，它都不会显示值。

第二个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>

现在，您可以通过单击按钮看到并没有工作，但它一直在工作，直到您实际添加了值。

第二个是右上角的最终计算文本字段，它显示总值，默认情况下也不会显示值，直到您添加或单击每个文本字段中的任何一个。

提前谢谢。

按钮不起作用，因为它们不会触发onkeyup方法，该方法用于计算sum并通过调用sum()方法显示总和。因此，相反，当您单击按钮时，您可以调用增加/减少函数和sum()方法(从而添加/减去并重新计算和显示总和(：

onclick="decreaseValueFirst(); sum();"

你可以将此应用于你的每个按钮，以获得以下工作结果：

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(); sum();">
<input type="text" id="txt1" onkeyup="sum()" />
<input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst(); sum();">
<input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec(); sum();">
<input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
<input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec(); sum();">
<input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird(); sum();">
<input type="text" id="txt3" onkeyup="sum()" />
<input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird(); sum();">
</div>
</div>
</div>
</body>
</html>

您正在对文本框上的keyup事件调用sum()函数。当您通过+/-按钮更改文本框中的值时，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
}

相关内容

最新更新

热门标签：