Как оптимизировать код javascript?

Question

[Иван Симонов]

Здравствуйте!

Есть простой код для открытия и закрытия попапа Fiddle

Не могу понять как вынести функции отдельно
чтобы можно было так

function openModal() {
        modal.classList.add('modal--open');
    }
   function closeModal() {
        modal.classList.remove('modal--open');
    }
   btn1.addEventListener('click', openModal);
    btn2.addEventListener('click', openModal);
    close.addEventListener('click', closeModal);

Answer 1

[hzzzzl]

для открытия связать кнопки с дивами-модалами
для закрытия Element.closest()
https://developer.mozilla.org/ru/docs/Web/API/Elem...

https://jsfiddle.net/9hj0y8vw/1/

Comments

[Иван Симонов]

Огромное спасибо. Возник вопрос -
e.target.matches('.btn-toggle')
или
e.target.classList.contains('btn-toggle')
разница в данных методах есть?

[hzzzzl]

ivan00007, matches короче :)
classList.contains будет искать только присутствие класса,
matches может выбирать по любому css селектору, то есть например element.matches('div > button.btn-class')

[Иван Симонов]

hzzzzl, Если не сложно, подскажите почему при генерации ошибок валидации для формы
выводиться одновременно 2 ошибки? т.е пытаюсь создать функцию для использования любого поля.
Например, для 1 поля - от 5 до 20 символов, а для для второго от 3 до 40 символов
также как правильно выводить ошибки, сразу для всех полей или только для одного?