实时求和两个输入值答案

【问题标题】：Sum two input values in realtime实时求和两个输入值
【发布时间】：2017-12-08 04:01:03
【问题描述】：

我想在第三个实时变量中对两个不同的输入求和。我会更好地解释我想要什么：

1 个变量：100（输入）

2 个变量：150（输入）

总和：250（非输入）

我该怎么做？

【问题讨论】：

请发布您的尝试...到目前为止您自己尝试过什么代码？
你想要它在前端？
基本上你想要的数据绑定类似于没有任何框架的角度框架。
向我们展示您尝试或研究的内容。 Stackoverflow 不是免费的代码编写服务。这里的目标是帮助您修复您的代码而不是为您完成工作

标签： php jquery html sum real-time

【解决方案1】：

基于客户端事件的实时操作由 JavaScript 而非 PHP 管理，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 />

【讨论】：

【解决方案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>

【讨论】：

【解决方案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);
  }
});

$(".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" />
<input class="two" type="number" /> 

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

【讨论】：

【解决方案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>

【讨论】：