Set a global variables and use them in function (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);
}

when is your code run? is there a click event handler? can you post the whole code? — Sergio
– Sergio, Commented Jan 13, 2014 at 16:30

Sergio · Accepted Answer · 2014-01-13 16:34:41Z

2

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".

answered Jan 13, 2014 at 16:34

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

basilikum Over a year ago

In the onload function, there should be no additional var statement.

aledustet · Accepted Answer · 2015-11-24 13:21:59Z

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.

edited Nov 24, 2015 at 13:21

answered Jan 13, 2014 at 16:36

aledustet

1,0012 gold badges14 silver badges40 bronze badges

Comments

Niet the Dark Absol · Accepted Answer · 2014-01-13 16:34:05Z

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.

Tibos · Accepted Answer · 2014-01-13 16:43:37Z

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

Collectives™ on Stack Overflow

Set a global variables and use them in function (javascript)

4 Answers 4

1

2

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1

2

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related