从t2中减去t1然后将其添加到已经存在的t3并在t3中以javascript显示

Question

我想要txtFirstNumberValue --txtSecondNumberValue，然后添加它已经存在txtThirdNumberValue值，但在我的情况下，它不起作用。

function sub() {
    var txtFirstNumberValue = document.getElementById('payment_image').value;
    var txtSecondNumberValue = document.getElementById('pay_amount').value;
    var txtThirdNumberValue = document.getElementById('pay_balance').value;
    if (txtFirstNumberValue == "")
     txtFirstNumberValue = 0;
   if (txtSecondNumberValue == "")
     txtSecondNumberValue = 0;
   var result = parseInt(txtFirstNumberValue) - parseInt(txtSecondNumberValue);

   if (!isNaN(result)) {
    document.getElementById('pay_balance').value += result;
  }
}

  <div class="input-box">
   <span>Amount</span>
   <input placeholder="Payment Amount" type="text" name="payment_image" onkeyup="sub();"  id="payment_image" class="number">
 </div>
 <div class="input-box">
   <span>Expences</span>
   <input placeholder="Expenses" type="text" name="expenses" id="pay_amount" onkeyup="sub();"  class="number">
 </div>
 <div class="input-box">
   <span>Balance</span>
   <input placeholder="Balance" value="15" readonly="readonly" type="text" name="pay_balance" id="pay_balance"   class="number">
 </div>

txtThirdNumberValue是从PHP代码动态发送的

Answer 1

在向结果添加结果之前，您需要将现有值从字符串转换为数字。这是如何做到的：

function sub() {
    var txtFirstNumberValue = document.getElementById('payment_image').value;
    var txtSecondNumberValue = document.getElementById('pay_amount').value;
    var txtThirdNumberValue = document.getElementById('pay_balance').value;
    if (txtFirstNumberValue == "")
     txtFirstNumberValue = 0;
   if (txtSecondNumberValue == "")
     txtSecondNumberValue = 0;
   var result = parseInt(txtFirstNumberValue) - parseInt(txtSecondNumberValue);

   if (!isNaN(result)) {
    var existing = parseInt(document.getElementById('pay_balance').value);
    var newResult = result + existing;
    document.getElementById('pay_balance').value = newResult;
  }
}

  <div class="input-box">
   <span>Amount</span>
   <input placeholder="Payment Amount" type="text" name="payment_image" onkeyup="sub();"  id="payment_image" class="number">
 </div>
 <div class="input-box">
   <span>Expences</span>
   <input placeholder="Expenses" type="text" name="expenses" id="pay_amount" onkeyup="sub();"  class="number">
 </div>
 <div class="input-box">
   <span>Balance</span>
   <input placeholder="Balance" value="15" readonly="readonly" type="text" name="pay_balance" id="pay_balance"   class="number">
 </div>

Answer 2

我不知道你要做什么，但是你应该解析你的第3个值然后再加回来。

这是你做错了。

你应该在parseInt

中使用基数值

＆＃13;

＆＃13;

function sub() {
    var txtFirstNumberValue = document.getElementById('payment_image').value;
    var txtSecondNumberValue = document.getElementById('pay_amount').value;
    var txtThirdNumberValue = document.getElementById('pay_balance').value;
    if (txtFirstNumberValue == "")
     txtFirstNumberValue = 0;
   if (txtSecondNumberValue == "")
     txtSecondNumberValue = 0;
   var result = parseInt(txtFirstNumberValue, 10) - parseInt(txtSecondNumberValue, 10);

   if (!isNaN(result)) {
    //This is what you should be doing. You didn't convert the value to int
    //You were concatinating it as a string
    var payVal = parseInt(document.getElementById('pay_balance').value, 10);
    payVal += result;
    document.getElementById('pay_balance').value = payVal;
  }
}

＆＃13;

  <div class="input-box">
   <span>Amount</span>
   <input placeholder="Payment Amount" type="text" name="payment_image" onkeyup="sub();"  id="payment_image" class="number">
 </div>
 <div class="input-box">
   <span>Expences</span>
   <input placeholder="Expenses" type="text" name="expenses" id="pay_amount" onkeyup="sub();"  class="number">
 </div>
 <div class="input-box">
   <span>Balance</span>
   <input placeholder="Balance" value="15" readonly="readonly" type="text" name="pay_balance" id="pay_balance"   class="number">
 </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

调用函数second text onblur event

并在此处更改

document.getElementById('pay_balance').value = parseInt(txtThirdNumberValue) + result;

＆＃13;

＆＃13;

function sub() {
  var txtFirstNumberValue = document.getElementById('payment_image').value;
  var txtSecondNumberValue = document.getElementById('pay_amount').value;
  var txtThirdNumberValue = document.getElementById('pay_balance').value;
  if (txtFirstNumberValue == "")
    txtFirstNumberValue = 0;
  if (txtSecondNumberValue == "")
    txtSecondNumberValue = 0;
  var result = parseInt(txtFirstNumberValue) - parseInt(txtSecondNumberValue);
  //alert(result);
  if (!isNaN(result)) {
    document.getElementById('pay_balance').value = parseInt(txtThirdNumberValue) + result;
  }
}

＆＃13;

<div class="input-box">
  <span>Amount</span>
  <input placeholder="Payment Amount" type="text" name="payment_image" id="payment_image" class="number">
</div>
<div class="input-box">
  <span>Expences</span>
  <input placeholder="Expenses" type="text" name="expenses" id="pay_amount" onblur="sub();" class="number">
</div>
<div class="input-box">
  <span>Balance</span>
  <input placeholder="Balance" value="15" readonly="readonly" type="text" name="pay_balance" id="pay_balance" class="number">
</div>

＆＃13;

＆＃13;

＆＃13;