Refactoring a function JS [closed]

i have a problem with my code. First, i did this code and it works well. I have two modals and i wanna to rewrite.

// Modal Carrinho
const openModal = document.querySelector('[data-modal="open"]');
const closeModal = document.querySelector('[data-modal="close"]');
const container = document.querySelector('[data-modal="container"]');
openModal.addEventListener('click', changeModal);
closeModal.addEventListener('click', changeModal);
container.addEventListener('click', closeModal);

function changeModal(e){
  e.preventDefault();
  container.classList.toggle('active');
}

function closeModal(e){
  if(e.target === this){
    changeModal(e);
  }
}

//Modal Compra
const openModal2 = document.querySelector('[data-modal="openCompra"]');
const closeModal2 = document.querySelector('[data-modal="closeCompra"]');
const container2 = document.querySelector('[data-modal="containerCompra"]');
openModal2.addEventListener('click', changeModal2);
closeModal2.addEventListener('click', changeModal2);
container2.addEventListener('click', closeModal2);

function changeModal2(e){
  e.preventDefault();
  container2.classList.toggle('active');
}

function closeModal2(e){
  if(e.target === this){
    changeModal(e);
  }
}

I tried it, but it doesn’t works

function createModal(nome) {
   var openModal = document.querySelector('[data-modal="open' + nome + '"]');
   var closeModal = document.querySelector('[data-modal="close' + nome + '"]');
   var container = document.querySelector('[data-modal="container' + nome + '"]');

   openModal.addEventListener('click', changeModal);
   closeModal.addEventListener('click', changeModal);
   container.addEventListener('click', closeModal);
}

function changeModal(e){
  e.preventDefault();
  container.classList.toggle('active');
}

function closeModal(e){
  if(e.target === this){
    changeModal(e);
  }
}


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

So this error appear and i don’t know how to solve and simplify this script “modal.js:13 Uncaught ReferenceError: container is not defined at HTMLAnchorElement.mudarModal”.

Answer

The error explains the problem, the container is undefined since you define in function createModal as below –

var container = document.querySelector('[data-modal="container' + nome + '"]');

To solve this, you should try to get the container from the DOM by using querySelector and transversing to current context container.

Or alternatively, you can pass the parameter nome to the change modal function and get the container from DOM again –

    function createModal(nome) {
      var callChangeModal = (event) => changeModal(event, nome);
      var callCloseModal = (event) => closeModal(event, nome);
      var openModal = document.querySelector('[data-modal="open' + nome + '"]');
      var closeModal = document.querySelector('[data-modal="close' + nome + '"]');
      var container = document.querySelector('[data-modal="container' + nome + '"]');

      openModal.addEventListener('click', callChangeModal);
      closeModal.addEventListener('click', callChangeModal);
      container.addEventListener('click', callCloseModal);
    }

    function changeModal(e, nome) {
      e.preventDefault();
      var container = document.querySelector('[data-modal="container' + nome + '"]');
      container.classList.toggle('active');
    }

    function closeModal(e, nome) {
      if (e.target === this) {
        changeModal(e, nome);
        }
      }


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