Topic: Adding swipe to class with many of the same class elements.
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';
});
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';
});
})
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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