Question

我想在第三个实时变量中将两个不同的输入相加。我会更好地解释我想要的东西：

1变量：100（输入）

2变量：150（输入）

总和：250（不输入）

我该怎么做？

Answer 1

对于基于客户端事件的实时操作，由JavaScript管理，而不是PHP，即服务器端。因此，为了做你想要的事情，我们可以使用keyboard之类的keyup事件，然后制作第三个事件readonly：

$(function () {
  $("#id-1, #id-2").keyup(function () {
    $("#id-3").val(+$("#id-1").val() + +$("#id-2").val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="id-1" />
<input type="number" id="id-2" />
<input type="number" id="id-3" readonly />

Answer 2

以下是普通javascript中的一个版本：

    <!doctype html>
<html>
<head>
</head>
<body>

<input type="text" id="val1">
<input type="text" id="val2">
<input type="button" value="Calculate" onclick="calculate();">
<script>

function calculate(){

var val1 = document.getElementById('val1').value;
var val2 = document.getElementById('val2').value;
var res = (parseFloat(val1)+parseFloat(val2))

alert(res);

}


</script>

Answer 3

我会建议不要使用客户端处理此类用例，但如果您需要使用JS（JQuery）完成它，请看下面的内容：

如果HTML：

<input class="one" type="number" />
<input class="two" type="number" /> 

<p class="result"></p>

那么JQuery应该是：

$(".one, .two").keyup(function() {
  if($('.one').val() != "" && $('.two').val() != "") {
    var result = parseInt($('.one').val()) + parseInt($('.two').val());
    $('.result').text(result);
  }
});

＆＃13;

$(".one, .two").keyup(function() {
  if($('.one').val() != "" && $('.two').val() != "") {
    var result = parseInt($('.one').val()) + parseInt($('.two').val());
    $('.result').text(result);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="one" type="number" />
<input class="two" type="number" /> 

<p class="result"></p>

＆＃13;

Answer 4

$(".one, .two").keyup(function() {
  if($('.one').val() != "" && $('.two').val() != "") {
    var result = parseInt($('.one').val()) + parseInt($('.two').val());
    $('.result').text(result);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="one" type="number" value="2" />
<input class="two" type="number" value="5"/> 

<p class="result"></p>

实时求和两个输入值

4 个答案: