Simplify function in JS

Question

I wanted to know how to simplify this function by having two different modals, it is possible ?

// Modal Carrinho
const abrirModal = document.querySelector('[data-modal="abrir"]');
const fecharModal = document.querySelector('[data-modal="fechar"]');
const container = document.querySelector('[data-modal="container"]');
abrirModal.addEventListener('click', mudarModal);
fecharModal.addEventListener('click', mudarModal);
container.addEventListener('click', fechaModal);

function mudarModal(e){
  e.preventDefault();
  container.classList.toggle('ativo');
}

function fechaModal(e){
  if(e.target === this){
    mudarModal(e);
  }
}

//Modal Compra
const abrirModal2 = document.querySelector('[data-modal="abrirCompra"]');
const fecharModal2 = document.querySelector('[data-modal="fecharCompra"]');
const container2 = document.querySelector('[data-modal="containerCompra"]');
abrirModal2.addEventListener('click', mudarModal2);
fecharModal2.addEventListener('click', mudarModal2);
container2.addEventListener('click', fechaModal2);

function mudarModal2(e){
  e.preventDefault();
  container2.classList.toggle('ativo');
}

function fechaModal2(e){
  if(e.target === this){
    mudarModal(e);
  }
}

Answer 1

Yes it is possible, the part that varies is the modal selector ( [data-modal="abrir"]), then you can create a Function that receives this value (can be the end of the selector, since the rest is equal, for example "shopping"), so:

function criarModal(nome) {
   var abrirModal = document.querySelector('[data-modal="abrir' + nome + '"]');
   var fecharModal = document.querySelector('[data-modal="fechar' + nome + '"]');
   var container = document.querySelector('[data-modal="container' + nome + '"]');

   abrirModal.addEventListener('click', function(){
     mudarModal(this, container);
   });

   fecharModal.addEventListener('click', function(){
     mudarModal(this, container);
   });

   container.addEventListener('click', fechaModal);
}

function mudarModal(e, container){
  e.preventDefault();
  container.classList.toggle('ativo');
}

function fechaModal(e){
  if(e.target === this){
    mudarModal(e);
  }
}


// E para usar:
criarModal("");
criarModal("Compra");

Whenever you are going to refactor a code so that it can be reused, highlight the common pieces and put in a method/function/etc, and pass through parameters only the part that changes or is variable, this is the idea, a good starting point to start reusing code.

Have good questions with examples on this site, I suggest searching for reuse code and will find many things.