Push numbers to Array on click without using global Scope

Question

I know that the below is perfectly viable:

var numberArray = [];

function addNumber(number) {
  numberArray.push(number);
}

and then:

<input type="button" value="Save" onclick="addNum(10);">
<input type="button" value="Save" onclick="addNum(990);">
...

But is it possible, for a better code, to have both my array and my action on the same function, and then trigger it on a click event, thus populating my array? Asking because, doing this:

function addNumber(number) {
  var numberArray = [];
  numberArray.push(number);
}

Does not increase the array values.

I know that inline click events is considerate a bad practice nowadays, but it's for learning purposes. All other answers here reference the array as a global scope, which is what I'm trying to avoid.

Edit: Ok if the above is not possible, any answer avoiding the global scope usage is valid.

Wrap all the code in an IIFE, or create an object, which has addNumber as a method, and numberArray as a property. To utilize one of these, you need to use addEventListener to attach events. — Teemu
– Teemu, Commented Sep 15, 2016 at 15:14
@Teemu: And then add the click handler in JavaScript since addNumber will no longer be global. — gen_Eric
– gen_Eric, Commented Sep 15, 2016 at 15:15
@taguenizy Instead of this, using the standard addEventListener is a much better alternative. — Sebastian Simon
– Sebastian Simon, Commented Sep 15, 2016 at 15:16
Because for some reason addNumber being global too, doesn't seem to bother you, one more alternative comes into mind. Functions are also objects, you could add numberArray as a property to addNumber. Then refer it in addNumber (or anywhere) like so: addNumber.numberArray.push(...). This way you can even keep the inline listeners. — Teemu
– Teemu, Commented Sep 15, 2016 at 15:55

Edmundo Santos · Accepted Answer · 2016-09-15 16:28:12Z

4

You can use a Self-Invoking Function, for creating a local scope, then you can add eventListeners instead using onclick directive.

(function () {
   var numberArray = [];

   function addNumber() {
       var child = this;
       var number = parseInt(child.getAttribute('data-number'), 10);

       numberArray.push(number);
       console.log(numberArray);
   }

   var _elms = document.getElementsByClassName('add-number-input');

   for (var i = 0; i < _elms.length; i++)
       _elms[i].addEventListener('click', addNumber);
})();

Add to a class .add-number-input to your inputs:

<input class="add-number-input" data-number="10" ...>
<input class="add-number-input" data-number="990" ...>

Now both your array and your function isn't on global scope.

http://codepen.io/rdsedmundo/pen/EgKGXK

edited Sep 15, 2016 at 16:28

answered Sep 15, 2016 at 15:23

Edmundo Santos

8,3163 gold badges31 silver badges41 bronze badges

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

1 Comment

gen_Eric Over a year ago

You should add the "radix" to parseInt: parseInt('', 10);

taguenizy · Accepted Answer · 2016-09-15 15:27:46Z

1

It can be achieved using self-invoking function. By this the numberArray will be in that function's scope and the method addNumber will be exposed as global.

(function(){
    var numberArray = [];
    window.addNumber = function(number) {
        numberArray.push(number);
    }
})();

edited Sep 15, 2016 at 15:27

answered Sep 15, 2016 at 15:18

taguenizy

2,2851 gold badge12 silver badges26 bronze badges

Comments

Folusho · Accepted Answer · 2016-09-15 15:40:28Z

0

I'm afraid there isn't- at least not one that doesn't defeat your aim of writing better code. Declaring numberArray in addNum() means it is created, initialized and destroyed each time the function is called. I advise that you use the global scope option. However, if you MUST use the options afforded by the other answers because of some program requirements, please do so.

answered Sep 15, 2016 at 15:40

Folusho

3825 silver badges13 bronze badges

1 Comment

Teemu Over a year ago

The other answers are aiming towards better practices, especially Edmundo's.

Collectives™ on Stack Overflow

Push numbers to Array on click without using global Scope

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related