Run function after object created by click

Question

Below is what I managed to do: When I click on a button with the class .btn-comprar-na-pagina, it fires function below.

$(function () {
var itens = [];
  $(document).on("click", ".btn-comprar-na-pagina", function (e) {
    e.preventDefault();
    var hrefSelf = $(this).parent().parent().find('.buy-in-page-button').attr('href');
    var sku = txt[0].replace("sku=", "");
    var qtd = $(this).parents('.box_produtos').find("input.qtd.pull-left, .input-number").val();

    //remove sku se existir em itens
    itens.forEach((item, index) => {
        if (sku.indexOf(item.id) > -1)
            itens.splice(index, 1)
    });

    var item = {
        id: sku,
        quantity: qtd,
        seller: '1'
    };

    itens.push(item);

});
});

Using the array in another capacity:

$(function(){
$(document).on("click", ".btn-2", function (e) {
    e.preventDefault();


       checkout.insertToCart(items, null)
        .done(function (order) {
            alert('Kit adicionado ao carrinho');
        });


});

Answer 1

I think your mistake is in isolating both functions. You need to study about closure, understand function Scope.

I found this article on closure here at stackoverflow How Closures work in Javascript?

This article in the Mozilla Developer Network explains what closure is https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

These videos can also help you understand a little more about closure

Closures in Javascript https://www.youtube.com/watch?v=8URgQdnjAFU

Javascript Functional (AULA 5) Closures https://www.youtube.com/watch?v=K9wDh4HvlxI

$(function () {
  var itens = []; //scope global fora das funções

  $(document).on("click", ".btn-comprar-na-pagina", function (e) {
    e.preventDefault();
    var hrefSelf = $(this).parent().parent().find('.buy-in-page-button').attr('href');
    var sku = txt[0].replace("sku=", "");
    var qtd = $(this).parents('.box_produtos').find("input.qtd.pull-left, .input-number").val();

    //remove sku se existir em itens
    itens.forEach((item, index) => {
        if (sku.indexOf(item.id) > -1)
            itens.splice(index, 1)
    });

    var item = {
        id: sku,
        quantity: qtd,
        seller: '1'
    };

    itens.push(item);
  });
  
  $(document).on("click", ".btn-2", function (e) {
    e.preventDefault();

    checkout.insertToCart(items, null)
    .done(function (order) {
        alert('Kit adicionado ao carrinho');
    });

  });
});

Answer 2

Is that something you want to do? Use another function at the end of the run with the values being passed by the first?

let itens = [
	{
    id: 2000017893,
    quantity: 1,
    seller: '1'
  }, 
  {
    id: 43546363,
    quantity: 2,
    seller: '1'
  }, 
  {
    id: 987858565,
    quantity: 1,
    seller: '1'
  }
];

let add = () => {
	let quantity = document.querySelector('#quantity').value
	let seller = document.querySelector('#seller').value
  let id = Math.round(Math.random() * 1000)
  
  itens.push({
  	id: id,
    quantity: +quantity,
    seller: seller
  });
  
  console.log(itens)
  funcao(itens)
}

let funcao = (arr) => {
	let copyItens = arr
  let result = document.querySelector('#result')
  result.innerHTML = JSON.stringify(copyItens)
}

<label>
  <p>Quantidade</p>
  <input id="quantity" type="number">
</label>
<label>
  <p>Seller</p>
  <input id="seller" type="number">
</label>
<hr>
<button onclick="add()">Add</button>
<button onclick="funcao()">Botao Secondario</button>
<hr>
<div id="result"></div>