JavaScript global variables declaration

Question

The following script works correctly although I need to make few amends. In each function I am getting the values need for the different formulas. However I tend to replicate the same line of code in different functions.

Ex.

function one(){ var v1= document.getElementById('one').value; }
function two(){ var v1= document.getElementById('one').value; }

Full code

I would like to declare all of the variables once and than only use the ones I need for the specific functions. If I declare them right at the top than once they are called they still hold the original value so I need to update that value to the current one if changed of course.

I'm not sure what your asking. Are you asking how to create global variables? — Smeegs
– Smeegs, Commented Nov 8, 2013 at 13:09
Personally I would like to declare variable for element and fetch fetch its value when required. like var v1= document.getElementById('one'); and use like v1.value — Satpal
– Satpal, Commented Nov 8, 2013 at 13:11
I am basically using the same variable value in different functions (Ex. v1= document.getElementById('one').value;), however I would like to declare all of the input values once and them use the variables in the functions — Aessandro
– Aessandro, Commented Nov 8, 2013 at 13:11

mplungjan · Accepted Answer · 2013-11-08 18:32:12Z

3

Your code will be very hard to read if you do it like in your fiddle.

Instead do

var myVars;
window.onload=function() {
  myVars = { 
    'list_price': document.getElementById('list_price'),
    'negotiated': document.getElementById('negotiated'),
    .
    .
    'lease_payment': document.getElementById('lease_payment')
  }

now you can do

var price = myVars.list_price.value;

or perhaps add a function

function getVal(id) {
  var val = document.getElementById(id).value;
  if (val =="" || isNaN(val)) return 0;
  return parsetInt(val,10); 
}

now you can do

var price = getVal("list_price");

edited Nov 8, 2013 at 18:32

answered Nov 8, 2013 at 13:12

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

3 Comments

Aessandro Over a year ago

All this is amazing, I like to see different solutions. Thank you

Aessandro Over a year ago

A small comment, I had to remove .value from "lease_payment" as it would return "undefined" when called like this: var x4 = myVars.lease_payment.value. Would you why?

mplungjan Over a year ago

I had a .value wrongly there. Removed now. Note the lack of comma after the last item in the object

Andy · Accepted Answer · 2013-11-08 13:19:20Z

1

mplungjan's solution is a great one. If you're at all concerned by your global vars leaking into the window scope, wrap your code in an Immediately Invoked Function Expression to prevent that from happening:

(function(){
  // code goes here
}());

answered Nov 8, 2013 at 13:19

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Comments

Tibos · Accepted Answer · 2013-11-08 13:39:55Z

1

There are two ways to go about this:

Update your variable when the value changes
Use a function that always returns the correct value

1) You can add a listener for the change event or the keyup event that changes your global variable:

// save initial value
var val = document.getElementById('one').value;

// update the value when input is changed
addEventListener(document.getElementById('one'), 'change', function() {
  val = document.getElementById('one').value;
});

console.log(val);

2) You can use a function that always returns the current value:

var val = function() { return document.getElementById('one').value; };

console.log(val());

2b) If you hate parenthesis, you can define a property that uses the function above as a getter:

Object.defineProperty(window, 'one', {
  get : function() { return document.getElementById('one').value; }
});

console.log(one);

edited Nov 8, 2013 at 13:39

answered Nov 8, 2013 at 13:12

Tibos

27.9k4 gold badges56 silver badges66 bronze badges

2 Comments

Voonic Over a year ago

What if value in the input box changed, v1 and v2 will still give old value, read the question carefully

Aessandro Over a year ago

@shadow very good point, especially that the input will change often as people might want to see different results (on the right) based on the new input values (on the left)

Collectives™ on Stack Overflow

JavaScript global variables declaration

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related