CODEWITHSUNDEEP
javascriptjqueryarrays
mauricio santos
mauricio santos

Reputation: 21

Passing array value between two different click events

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
    ...
});

Upvotes: 1

Views: 419

Answers (1)

Wanton
Wanton

Reputation: 840

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
     }
});

Upvotes: 1

Related Questions