Question

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

到目前为止，我已经设法创建计算器，它接受预定义的输入变量并显示总数，但是当用户在表单中输入新变量时，我很难获得更新总数。

我尝试了几种不同的东西来从表单返回输入并替换全局输入变量（“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>

Answer 1

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

＆＃13;

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();

＆＃13;

<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()" />

＆＃13;

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

如何在运行总计算器

1 个答案: