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

标签 javascript php jquery bootstrap-4 codeigniter-3

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

一切都运行良好，但问题是。每当我物理地向这三个输入字段添加一个值时，它就会获取该值并显示它。 第一个专业 -> 但每当我尝试通过按钮添加值时，单击它不会显示值。

第二个亲->默认情况下，我会为每个文本字段添加值，它们应该将最终计算值显示到我的第四个文本字段中，该文本字段位于所有文本字段的右上方 但在我触摸任何文本字段之前，它不会在同一文本字段上显示计算值。

请帮助我，这确实是需要的。这是我的源代码。

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>

关于javascript - 文本字段不是通过单击按钮读取值，而是直到我将值物理添加到文本字段中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53388923/

上一篇：javascript - 查找最小值和最大值键嵌套对象

下一篇：javascript - 数据表 javascript - RoR

相关文章：

javascript - 另一个冲突的 jquery 问题

javascript - 在 Javascript 中将 BigInteger 转换为 Int64

javascript - 我在使用 setInterval 和类方法时遇到了很多麻烦

php - 使用 html2fpdf 时不显示图像

javascript - 如何管理 AngularJS 的 http 请求调用

javascript - 如何在 javascript 中自定义 <span>？

php - 请求帮助了解为什么我的表单无法正确验证

PHP - 如何计算发电机的产量

javascript - 关于 jQuery 中的 getJSON 函数

javascript - 如何使用正则表达式实现搜索？

©2024 IT工具网  联系我们