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


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

brane pro premium priority asked 3 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
});

touchSwipeLeftRight.init();

swipeLeftRight.addEventListener('swipeleft', (e) => {
 e.target.style.marginRight = '100px';
});

Grzegorz Bujański staff answered 3 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
    });
  touchSwipeLeftRight.init();

  el.addEventListener('swipeleft', (e) => {
        e.target.style.marginRight = '100px';
    });
})

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • 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
Tags