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

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");
    }
  });
});

79 thoughts on “How to get addEventListener click event to work on IOS with vanilla javascript”