两个输入字段的总和 > 输出到第三个字段答案

【问题标题】：Sum of two input fields > output into third两个输入字段的总和 > 输出到第三个字段
【发布时间】：2018-03-17 04:44:10
【问题描述】：

我想将两个输入字段的计算输出到第三个，同时输入（keyup，我想？）。以下只是一个视觉示例，因为我不知道如何做得更好：

<input type="text" class="form-control text-center" id="n1" 
maxlength="2" placeholder="1-20">

<input type="text" class="form-control text-center" id="n2" 
maxlength="2" placeholder="1-20">

<input type="text" class="form-control text-center" id="sum-out" 
maxlength="2" readonly>

$(document).ready(function() {
var n1 = $("#n1").val();
var n2 = $("#n2").val();
var sum = ((n1 + n2) / 10) * 2;

sum = document.getElementById('sum-out')

return sum;
});

请帮忙...

【问题讨论】：

您的具体问题是什么？
我只需要知道 hot 就可以将两个输入的计算输出到第三个..

标签： javascript input calc calculation

【解决方案1】：

您需要在某些“触发”它时执行计算，而不是在页面准备就绪时执行计算，因为用户还没有机会输入任何数据。添加一个允许用户告诉程序他们已准备好执行计算的按钮是最简单的事情。

顺便说一句，您的计算实际上并没有得到两个输入的“总和”。您可能需要重新考虑您的变量和元素名称。

$(document).ready(function() {

  // You can't calculate the answer as soon as the page is ready.
  // You need to wait until the user has done something that triggers
  // the calculation. Here, it will happen as the user types into either
  // of the first two inputs
  $("#n1, #n2").on("input", calc);
  
  // And also when the button is clicked
  $("#calc").on("click", calc)
  
  function calc(){
    var n1 = $("#n1").val();
    var n2 = $("#n2").val();
    $('#result').val(((n1 + n2) / 10) * 2);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control text-center" id="n1" 
    maxlength="2" placeholder="1-20">

<input type="text" class="form-control text-center" id="n2" 
    maxlength="2" placeholder="1-20">

<input type="text" class="form-control text-center" id="result" 
    maxlength="2" readonly>
    
<button type="button" id="calc">Calculate</button>

【讨论】：

@Pixelmaker 我已经更新了答案，以展示如何在用户输入字段时进行计算。不要忘记投票并标记为“the”答案。

【解决方案2】：

如果您没有parseFloat() 这些值，它们将添加为字符串，即使您输入的确实是一个数字，例如：((5 + 5) / 10) * 2 将等于11，而不是2。（除非11 是您的预期行为）

$(document).ready(function() {
$("#n1").keyup(function(){
var val = $(this).val();
var other = $('#n2').val();
  if($.isNumeric(val) && $.isNumeric(other)){
    $('sum-out').val((parseFloat(other) + parseFloat(val)) / 10 * 2)
  }
});
$("#n2").keyup(function(){
var val=$(this).val();
var other = $('#n1').val();
  if($.isNumeric(val) && $.isNumeric(other)){
    $('#sum-out').val((parseFloat(other) + parseFloat(val)) / 10 * 2)
  }
});




});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control text-center" id="n1" 
maxlength="2" placeholder="1-20">

<input type="text" class="form-control text-center" id="n2" 
maxlength="2" placeholder="1-20">

<input type="text" class="form-control text-center" id="sum-out" 
maxlength="2" readonly>

【讨论】：