CODEWITHSUNDEEP
javascriptvariablesstatic
prabhu r
prabhu r

Reputation: 181

declare static variable in javascript

 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?

Upvotes: 1

Views: 6219

Answers (3)

synthet1c
synthet1c

Reputation: 6282

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>

Upvotes: 2

Jonathan
Jonathan

Reputation: 349

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>

Upvotes: 2

F.Almeida
F.Almeida

Reputation: 413

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 recomend 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++;
}

Upvotes: 2

Related Questions