Passing array value between two different click events

Question

How can I pass values from an array from one event click to another with jQuery?

Here is an example of I want to do: the first click event adds or remove values from the array if the input checkbox is selected or not. In the second click I want to loop trough all the elements of this array.

var array=[];
 $( "input" ).on( "click", function() {
  var $input=$(this)
  if($input.is(":checked")){
  array.push($(this).val()); //append check box value to array if is selected
  }
else{
   array.pop($(this).val()); // remove check box value to array if is not selected
  }

 })
$('#cmd').click(function() {
     for (i of array) {
        console.log(array[i]); // loop trough all elements in array
    ...
});

Yes, it valid. My problem is when a use the array outiside the first, it becomes empty — mauricio santos
– mauricio santos, Commented Dec 12, 2018 at 20:03

Wanton · Accepted Answer · 2018-12-12 22:37:40Z

1

Your code looks ok except two things. First for for (i of array). Using of will return actual value as i, but you are using value as index in array[i].

If you want use index then use for (let i = 0; i < array.length; i++) instead.

You can also use Array.prototype.forEach() but you can't break out of it's loop https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Second thing is that .pop() doesn't support parameter. Use code below instead of .pop()

var index = array.indexOf($input.val());
if (index > -1) {
  array.splice(index, 1);
}

If your event handlers are in different scope and #cmd handler can't see the array. You might use this little bit bad solution for sharing the array between scopes :)

$("input").on( "click", function() {
  var array = $("#cmd").data("arr") || [];

  var $input= $(this);
  var value = $input.val();
  if($input.is(":checked")){
    array.push(value); /
  } else {
    var index = array.indexOf(value);
    if (index > -1) {
      array.splice(index, 1);
    }
  }

  $("#cmd").data("arr", array);
});

$('#cmd').click(function() {
     var array = $(this).data("arr") || [];
     for (let value of array) {
        console.log(value); // loop trough all elements in array
     }
});

edited Dec 12, 2018 at 22:37

answered Dec 12, 2018 at 17:57

Wanton

8587 silver badges9 bronze badges

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

8 Comments

mauricio santos Over a year ago

the for Loop it's ok, i have problems with the arrays values. Outside the scope of my first click event, the array becomes empty.

Wanton Over a year ago

@mauriciosantos yes it's because you can't use .pop() like that.

mauricio santos Over a year ago

the pop with parameters works god. For example if I do the console.log(array) inside the first click scope it works nice. The problem is when I call the array outside the scope of the first click event, the array becomes empty.

Wanton Over a year ago

@mauriciosantos no it doesn't work ok, because array.pop() will always removes last item from array. So every time input is unchecked last element from array is removed. Also define what you mean by "outside" and "empty"? Are you sure your "outside" has access to your array variable? Does "empty" mean empty array or undefined value?

mauricio santos Over a year ago

Sorry @Wanton "outside" mean out of the first click event( the event here i append the values to the array); and "empty" means the array without any values when i try to use it outside the first click event. I think the problem is related with the local and global declaration of the array variable

|

Collectives™ on Stack Overflow

Passing array value between two different click events

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related