我有可用于使用JavaScript减去文本框值的代码吗？

Question

i have code that can be use for subtract and additional textbox values using javascript and it is working but problem is that javascript again and again executed function whenever onfocus textbox i want only one time javascript should be executed function ?

javascript function again and again additional onMouseOver="return B(0);"

javascript function again and again subtraction onfocus="return C();"

javascript function again and again additional onfocus="return D();"

function getObj(objID){
return document.getElementById(objID);
}

function B(){
var advanceBox = document.getElementById('advance');
var originalValue = advanceBox.value;
advanceBox.onfocus = function() {
this.value = parseFloat(originalValue, 10) +
parseFloat(document.getElementById('recamt').value, 10);
return false;
};
}   

function C() {
getObj("balance").value=parseFloat(getObj("total").value  || 0)-
(parseFloat(getObj("advance").value || 0)) ;
getObj("balance").value=parseFloat(getObj("balance").value || 0)-
(parseFloat(getObj("discount").value)||0) ;
return false;
} 

function D() {
getObj("total").value=parseFloat(getObj("total").value  || 0)+
(parseFloat(getObj("openbal").value || 0)) ;
return false;
}      


 Opening Balance:<input class="input_field2" 
 type="text" name="openbal" id="openbal"><br />

Total:<input class="input_field2" type="text" 
readonly name="total" id="total" value="5000"><br />

Advance:<input class="input_field2" type="text" 
readonly name="advance" id="advance"    value="500" 
onMouseOver="return B(0);"><br />

Balance:<input class="input_field2" readonly type="text" 
name="balance" id="balance" onfocus="return C();"><br />

Rem Amount:<input class="input_field2" type="text"
name="recamt" id="recamt"><br />

Discount: <input class="input_field2" 
style="background-color:#FFF !important;" 
type="text" name="discount" id="discount" >

Answer 1

You could have:

var executedAlready = false;

An inside functions B and C have:

if(executedAlready != true){ executedAlready = true; }
else { return; }

Or maybe you could detach the events instead? I guess there are a few different ways to do this.

Answer 2

you can use one or more flag(s) :

in the begenning of the page :

<script>
    var flag = false;
</script>

and on your element:

<div .... onMouseOver="if(!flag) { flag = true; return B(0);}" > .... </div>

same for onFocus...

Answer 3

What the other answers tell you that the "quickest" way to get results is to make your functions only execute once. You can do that like this:

• Make a flag (just a variable that knows if your function has been triggered already).
• When executing your functions, first check on this flag.

Here's an example how to do it with function B():

( Note: I didn't change your function, don't wanna get into that now)

// setup fired as false
var hasBFired = false;
function B(){
  // if B is true, we do nothing
  if (hasBFired) {
    return;
  // else if it is not true, basically only the first time you call this, flip the flag and execute the rest of the code.
  } else {
    hasBFired = true;
  }
  var advanceBox = document.getElementById('advance');
  var originalValue = advanceBox.value;
  advanceBox.onfocus = function() {
  this.value = parseFloat(originalValue, 10) +
  parseFloat(document.getElementById('recamt').value, 10);
  return false;
};

Now, repeat the same with C and D functions (setup two more flags).

This is not the best way - it's not good to setup global objects and stuff, but since you probably aren't getting any side library in, it will help you solve your issue for now. For long term solution, you should use an Event library (like YUI Event ) and have it handle attaching and detaching actions to onfocus events for you.