javascript - Refactoring a function JS

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers. question from:https://stackoverflow.com/questions/65903885/refactoring-a-function-js

Answer 1

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