var i=0;
 function mul()
 {
    var qty = document.getElementsByClassName("qty");
    var rs = document.getElementsByClassName("rs");
    var amt = document.getElementsByClassName("amt");
    var mul=(qty[i].value)*(rs[i].value);
    amt[i].setAttribute("value",mul);
   sp.appendChild(iteminp);
   sp.appendChild(qtyinp);
   sp.appendChild(rsinp);
   sp.appendChild(amtinp);
   i++;
}

In the above program i want the value of 'i' should be increased for each time we call the function and it should be same all over the program like static variable. how to do it?

 var i=0;
 function mul()
 {
    var qty = document.getElementsByClassName("qty");
    var rs = document.getElementsByClassName("rs");
    var amt = document.getElementsByClassName("amt");
    var mul=(qty[i].value)*(rs[i].value);
    amt[i].setAttribute("value",mul);
   sp.appendChild(iteminp);
   sp.appendChild(qtyinp);
   sp.appendChild(rsinp);
   sp.appendChild(amtinp);
   i++;
}

In the above program i want the value of 'i' should be increased for each time we call the function and it should be same all over the program like static variable. how to do it?

• javascript
• variables
• static

• 2 Whats the issue? – Satpal Commented Dec 13, 2017 at 11:35
• 2 Exactly that way. It's global, so every function will see the same i. – Federico klez Culloca Commented Dec 13, 2017 at 11:35
• 1 just drop the var before i . Then i would be a global variable – vibhor1997a Commented Dec 13, 2017 at 11:37
• There's nowhere there for i to be considered static. Do you simply want a global variable? If yes then declare it as window._i = 1;, but this seems like a bad way to achieve something. (It's mon practice to prefix global vars with an underscore, and certainly don't just call it i) – Reinstate Monica Cellio Commented Dec 13, 2017 at 11:50

3 Answers 3

JS variables are local to a function or they are global. Since you declared i outside a function, it's global.

To prove this, save this as test.html, open it in your browser and press the button a few times. I simplified your function a bit!

<script>
var i=0
function mul(){
  alert("i: " + i++)
}
</script>
<button onclick='mul()'>Press me</button>

You can have a javascript file named globals.js(don't forget to include it in your index.html) then declare your global variable, which will be available in all your web solution.

globals.js:

var _i = 0; // Would not reend using "i" as the variable name since it 
            // can polute the global scope

yourFile.js:

 function mul()
 {
   var qty = document.getElementsByClassName("qty");
   var rs = document.getElementsByClassName("rs");
   var amt = document.getElementsByClassName("amt");
   var mul=(qty[_i].value)*(rs[_i].value);
   amt[_i].setAttribute("value",mul);
   sp.appendChild(iteminp);
   sp.appendChild(qtyinp);
   sp.appendChild(rsinp);
   sp.appendChild(amtinp);
   _i++;
}

You could create a decorator function that can wrap your function with a counter that will give you access to the count through a read only property.

This solution will require modern browsers due to having used Symbol, but you could substitute this with a dunder property eg. __count__ in it's place.

// this is used to create a privaty property on your function
const COUNT = typeof Symbol !== 'undefined' ? Symbol('count') : '__count__'

// this function takes your function and wraps it with a counter
function counter(fn) {
  // this is called whenever you call the decorated function
  function _counter(...args) {
    // increment the counter
    _counter[COUNT]++
    // call the original function
    return fn(...args)
  }
  // create the private property on your function and the accessor
  Object.defineProperties(_counter, {
    [COUNT]: { value: 0, writable: true },
    name: { value: fn.name || 'counter' },
    count: { get: () => _counter[COUNT] }
  })
  // return the decorator function
  return _counter
}

// function to decorate
function _mul(x, y) {
  // do something to multiply
  return x * y
}

// decorate your functions with the counter
const mul = counter(_mul)
const mul2 = counter(_mul)

// proof that both counters are independent and work correctly
console.log(
  mul(1, 2), // 2
  mul(3, 4), // 12
  `mul has been called ${mul.count} times`
)
console.log(
  mul2(5, 6), // 30
  mul2(7, 8), // 56
  mul2(9, 10),// 90
  `mul2 has been called ${mul2.count} times`
)

<script src="https://codepen.io/synthet1c/pen/KyQQmL.js"></script>