Topic: Adding swipe to class with many of the same class elements.

brane priority asked 2 years ago

Expected behavior I would like to add the touch to each class with the name card.

Actual behavior Errors with "event-handler.js:200 Uncaught TypeError: e.addEventListener is not a function at C (VM1088 mdb.min.js:310) at Object.on (VM1088 mdb.min.js:310) at r.value (VM1088 mdb.min.js:316)"

const swipeLeftRight = document.getElementsByClassName('card');
const touchSwipeLeftRight = new mdb.Touch(swipeLeftRight, 'swipe', {
   threshold: 100


swipeLeftRight.addEventListener('swipeleft', (e) => { = '100px';

Grzegorz Bujański staff answered 2 years ago

getElementsByClassName returns an object containing all elements with the given class.You need to initialize Touch and add events for each element separately. Try to do it this way:

const swipeLeftRight = document.getElementsByClassName('card');
swipeLeftRight.forEach((el) => {
  const touchSwipeLeftRight = new mdb.Touch(el, 'swipe', {
   threshold: 100

  el.addEventListener('swipeleft', (e) => { = '100px';

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Mobile Web
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No