如何在运行总计计算器时返回表单输入并更新 JavaScript 变量

how do I return form inputs and update javascript variables in running total calculator

本文关键字：输入 表单 更新 变量 JavaScript 返回 运行 计算器      更新时间：2023-09-26

>我正在尝试构建一个计算器，它可以根据预定义输入的总和计算总数。允许用户随时更改输入，总数应自动更新。

到目前为止，我已经设法创建了计算器，它采用预定义的输入变量并显示总数，但是当用户在表单中输入新变量时，我正在努力更新总数。

我已经尝试了几种不同的方式来从表单返回输入并替换全局输入变量（"input1"和"input2"），但它们不起作用。任何帮助将不胜感激，迈克。

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<br>TOTAL: <div id="chkTotal"></div>
<br>
<input type="text" name="input1" id="input1"/>
<input type="button" value="Change input 1" onclick="GetTotal(this)"/>
<br>
<br>
<input type="text" name="input2" id="input2"/>
<input type="button" value="Change input 2" onclick="GetTotal(this)"/>
<script>
  var input1 = 11692;
  var input2 = 13
$(document).ready(function() {
  GetTotal();
  SetInputVariables();
});
function GetTotal(txtBox) {
  var total = 0;
  document.getElementById("input1").value = input1;
  document.getElementById("input2").value = input2;
  $('input:text').each(function(index, value) {
    total += parseInt($(value).val() || 0);
  });
  $("#chkTotal").html(total);
}
</script>

您不断用预定义的值覆盖输入框值。仅运行一次预填充代码：

var input1 = 11692;
var input2 = 13;
$(document).ready(function() {
  document.getElementById("input1").value = input1;
  document.getElementById("input2").value = input2;
  GetTotal();  
});
function GetTotal() {
    var total = 0;
    $('input[type=text]').each(function(index, value) {
      total += parseInt($(value).val() || 0);
    });
    $("#chkTotal").html(total);
}
GetTotal();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
TOTAL:
<div id="chkTotal"></div>
<br>
<input type="text" name="input1" id="input1" onkeyup="GetTotal()" />
<br>
<br>
<input type="text" name="input2" id="input2" onkeyup="GetTotal()" />

注意：在输入中添加了onkeyup监听器，而不是每个输入的外部按钮

相关文章：