文本字段不是通过单击按钮来读取值,而是直到我将值实际添加到文本字段中为止

时间:2018-11-20 08:29:10

标签: javascript php jquery bootstrap-4 codeigniter-3

我有三个文本字段,每个字段都有用于增加或减少值的按钮,最后一个文本字段将显示每个字段值的计算。

一切正常,但问题是。每当我在物理上将值添加到这三个输入字段中时,它就会获取并显示该值。 首先是亲->但是,只要我试图通过单击按钮来增加价值,它就不会显示价值。

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>

现在,您可以通过单击按钮来查看是否有作用,但是直到您实际添加值后,它才起作用。

第二个在右上角,是最终计算出的文本字段,它显示了合计值,默认情况下,在您添加或单击每个文本字段中的任何一个之前,它也不显示值。

提前谢谢。

1 个答案:

答案 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
}