Question

我试图制作一个简单的表格，允许用户添加两个数字，并且我希望它在添加两个数字后都显示总数，而无需单击任何按钮或刷新页面

function add_number() {
                   
  var first_number = parseInt(document.getElementById("Text1").value);
  var second_number = parseInt(document.getElementById("Text2").value);
  var result = first_number + second_number;

  document.getElementById("txtresult").value = result;
  
}

<p>Enter First Number :</p>
<br>
<input type="text" id="Text1" name="TextBox1">
<br> <p>Enter Second Number :</p>
<br>
<input type="text" id="Text2" name="TextBox2">
<br>Result :
<br>
<input type="text" id="txtresult" name="TextBox3">

我尝试了上面的代码，但是没有用。

Answer 1

我写这个是因为@TylerRoper和@kshetline发表了有用的评论，所以我将它们合并了。根本上需要添加事件处理程序。我还包括了一个检查解析失败的检查，以便即使一个字段为空或非数字（将其视为0）也可以得到结果。

var text1 = document.getElementById("Text1");
var text2 = document.getElementById("Text2");

function add_number() {
   var first_number = parseFloat(text1.value);
   if (isNaN(first_number)) first_number = 0;
   var second_number = parseFloat(text2.value);
   if (isNaN(second_number)) second_number = 0;
   var result = first_number + second_number;
   document.getElementById("txtresult").value = result;
}

<p>Enter First Number :</p>
<br>
<input type="text" id="Text1" name="TextBox1" oninput="add_number()">
<br> <p>Enter Second Number :</p>
<br>
<input type="text" id="Text2" name="TextBox2" oninput="add_number()">
<br>Result :
<br>
<input type="text" id="txtresult" name="TextBox3">

Answer 2

@Nick提供的好的解决方案。我刚刚添加了一个检查，确认用户只能输入数字输入。另一种方法。

function add_number(e) {
  if (isNumberKey(e)) {
    setTimeout(() => {
      var first_number = document.getElementById("Text1").value !== "" ? parseInt(document.getElementById("Text1").value) : 0;
      var second_number = document.getElementById("Text2").value !== "" ? parseInt(document.getElementById("Text2").value) : 0;
      var result = first_number + second_number;
      document.getElementById("txtresult").value = result;
    }, 50)
    return true;
  } else {
    return false;
  }
}

function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}

<p>Enter First Number : <input type="text" id="Text1" name="TextBox1" onkeypress="return add_number(event)"></p>

<p>Enter Second Number : <input type="text" id="Text2" name="TextBox2" onkeypress="return add_number(event)"></p>

<br>Result : <input type="text" id="txtresult" name="TextBox3">

希望它会对您有所帮助。

Answer 3

jQuery方法：

$('#Text1, #Text2').on("paste keyup",

  function () {
  
    var result = parseInt($("#Text1").val()) + parseInt($("#Text2").val());
    
    $("#txtresult").val((isNaN(result) ? '' : result));
    
  }
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Enter First Number:</p>
<input type="text" id="Text1" name="TextBox1">
<p>Enter Second Number:</p>
<input type="text" id="Text2" name="TextBox2">
<p>Result:</p>
<input type="text" id="txtresult" name="TextBox3">

Answer 4

function add_number() {
                   
  var first_number = parseInt(document.getElementById("Text1").value);
  var second_number = parseInt(document.getElementById("Text2").value);
  var result = first_number + second_number;

  document.getElementById("txtresult").value = result;
  
}

<p>Enter First Number :</p>
<br>
<input type="text" id="Text1" name="TextBox1">
<br> <p>Enter Second Number :</p>
<br>
<input type="text" id="Text2" name="TextBox2">
<br>Result :
<br>
<input type="text" id="txtresult" name="TextBox3">
<p>
<input type="button" value="submit" onclick="add_number()">
<input type="reset" value="reset">

添加两个数字并显示结果，而无需单击按钮

4 个答案: