设置全局变量并在函数中使用它们（javascript）

Question

I am new to programming and I am stuck. Here is my code:

function Subtraction() {
  var a = document.getElementById('inputA').value;
  var b = document.getElementById('inputB').value;
  var c = (parseFloat(a) - parseFloat(b)).toFixed(5);
  alert(c);
}

This works fine to me, but I have many functions that waits for onclick event to be executed. And every function have the same a and b variables. How can I get them in global scope so I don't need to wait them over and over again? I tried to put them outside of the function, but what event can trigger their declaration? There is what I tried:

var a = document.getElementById('inputA').value;
var b = document.getElementById('inputB').value;
parseFloat(a).toFixed(5);
parseFloat(b).toFixed(5);
function Subtraction() {
  var c = a - b;
  alert(c);
}

Answer 1

I see two options at least:

One is to declare them after window has loaded. Other is to pass the elements as function parameters:

1

var a,b;
window.onload = function(){
    a = document.getElementById('inputA').value;
    b = document.getElementById('inputB').value;
}

2

element.onclick = function(){
    var a = document.getElementById('inputA').value;
    var b = document.getElementById('inputB').value;
    Subtraction(a, b);
};

Btw, capital letters is used for Classes, if its a normal function better to use small "s".

Answer 2

You can try to declare the vars in a different javascript source file or put them in an upper block the environment of the variables holds through the entire execution from the moment you declare them so if you do this:

<script src="declare_vars.js"></script>
<script src="use_vars.js"></script>

In declare_vars.js you can try doing:

var a;
var b;

and in the other scripts use them as you want and give them the values you need, they will always be available.

Answer 3

The value of an input is a primitive (specifically a string) and is therefore passed by value. This means that if you do this:

var oldvalue = document.getElementById('someinput').value;
document.getElementById('someinput').value = "derp";
alert(oldvalue); // it has not changed

What you can do, if you want, is cache the result of getElementById :

var inputA = document.getElementById('inputA');
var inputB = document.getElementById('inputB');
// in your function {
    var c = parseFloat(inputA.value)-parseFloat(inputB.value);
// }

This works because the result of getElementById is the input element itself. You then retrieve the desired property of this element ( .value ) at the specific time you need it.

That said, avoid global variables. Put variables in a scope if you want, but don't make them global.

Answer 4

Disclaimer: this solution makes no attempt to avoid using global variables. The usage of global variables may introduce all sorts of problems, though for an application as simple as the one described by the OP the potential pitfalls are limited.

---

You can add the initialization in the change event handler of each input to make sure it is always up to date:

HTML

  a<input id="inputA"/>
  b<input id="inputB"/>
  <button id="sum">sum</button>

JAVASCRIPT

var a,b;

document.getElementById('inputA').addEventListener('change',function(evt){
  a = +evt.target.value;
});

document.getElementById('inputB').addEventListener('change',function(evt){
  b = +evt.target.value;
});

document.getElementById('sum').addEventListener('click', function(evt){
  console.log('Sum is ' + (a+b));
});

DEMO: http://jsbin.com/EZECEraR/2/edit