onclick - How to get addEventListener click event to work on IOS with vanilla javascript

Question

So I encountered something weird today (at least to me). I'm trying to do a basic click event that adds and removes a class to a div with some css animations. This is an image slider I'm building. It works fine on Safari, Chrome etc on desktop. But on Iphone it seems like it only works the first time it's clicked or touched. Looks like it doesn't remove the class so it can be added again..

I did try to add this to check for user agent and adding touchstart with no luck:

var ua = navigator.userAgent,
event = ua.match(/iPad/i) || ua.match(/iPhone/) ? "touchstart" : "click";

I also added all the prefixes I could find to the css but since it is working the first time it's probably not the issue.

Hope someone have an idea of what's going on.

const clientBtn = document.querySelectorAll(".client-btn");
let clientSliderContainer = document.querySelectorAll(
  ".field-clientslider-container__wrapper"
);
clientSliderContainer[0].style.display = "grid";
let clientNumber = 0;
clientBtn.forEach(function (button) {
  button.addEventListener('click', function () {
    clientSliderContainer[clientNumber].style.display = "none";
    clientSliderContainer[clientNumber].classList.remove("fadein");
    if (button.classList.contains("client-slider-prev-btn")) {
      clientNumber--;
      if (clientNumber < 0) {
        clientNumber = clientSliderContainer.length - 1;
      }
      clientSliderContainer[clientNumber].style.display = "grid";
      clientSliderContainer[clientNumber].classList.add("fadein");
    }
    if (button.classList.contains("client-slider-next-btn")) {
      clientNumber++;
      if (clientNumber > clientSliderContainer.length - 1) {
        clientNumber = 0;
      }
      clientSliderContainer[clientNumber].style.display = "grid";
      clientSliderContainer[clientNumber].classList.add("fadein");
    }
  });
});

question from:https://stackoverflow.com/questions/65892459/how-to-get-addeventlistener-click-event-to-work-on-ios-with-vanilla-javascript

Answer 1

Ok so I found out it indeed was that, my class was not being removed properly. I thought I handled that by removing the class in the beginning of my listener callback. But I just made a fix where I did a setTimeout() to remove the class after a few milliseconds instead. That did the trick.

clientBtn.forEach(function (button) {
  button.addEventListener('click', function (event) {
    clientSliderContainer[clientNumber].style.display = "none";
    if (event.currentTarget.classList.contains("client-slider-prev-btn")) {
      clientNumber--;
      if (clientNumber < 0) {
        clientNumber = clientSliderContainer.length - 1;
      }
      clientSliderContainer[clientNumber].style.display = "grid";
      clientSliderContainer[clientNumber].classList.add("fadein");
      setTimeout(function() {
        clientSliderContainer[clientNumber].classList.remove("fadein");
      }, 1000);
    }
    if (event.currentTarget.classList.contains("client-slider-next-btn")) {
      clientNumber++;
      if (clientNumber > clientSliderContainer.length - 1) {
        clientNumber = 0;
      }
      clientSliderContainer[clientNumber].style.display = "grid";
      clientSliderContainer[clientNumber].classList.add("fadein");
      setTimeout(function() {
        clientSliderContainer[clientNumber].classList.remove("fadein");
      }, 1000);
    } 
  });
});