How to re-enable click behaviour after preventdefault?

Thank you so much!! :slight_smile:
Oj that I can’t remove the current class from all slides as it causes the current slide to disappear, but yeah if that wouldn’t happen it should be that way.

/* remove current class from all links, and give it only to the one that was clicked */

Also IIRC should add the class only if the current slide has the class current.

Doing the following it works but it requires a second click in the current slide to activate the link, so in the first click it adds the class “current” to the link, and in the second it redirects

const handleClick = (e) => {
  //e.preventDefault();

  if (!e.target.closest("a").classList.contains("current")) {
      e.preventDefault()
  }
  
  links.forEach(link => {
    link.classList.remove('current');
  });

  slides.forEach(slide => {
  if (slide.classList.contains('current')){
    e.target.closest("a").classList.add("current");
  }

However in the callback ( onAfterSlideChange())… the same code works perfectly.
So I’m trying to adapt the code for the “first load” in which I guess shouldn’t be needed to remove the class “current” from the links as we haven’t set it yet to any link.

Edit:let me see if I figure it out:
Using this for the “first load” makes it work fine for the “first load” but then the callback requires a second click on the current slide.

let links = Array.from(document.querySelectorAll('.link-slider'));
let slides = Array.from(document.querySelectorAll('.carousel-3d-slide'));

const handleClick = (e) => {
  //e.preventDefault();

  if (!e.target.closest(".carousel-3d-slide").classList.contains("current")) {
      e.preventDefault()
  }  
}

links.forEach(link => {
  //link.classList.remove('current');
  link.addEventListener('click', handleClick)
});

Okey figured it out, scripts below. Thank you so much for all the help here!!! And thanks for all the patience and everything!!! :slight_smile:
btw I do have considered learning JS from start in the near future :wink:
I’m actually searching for a plan b course (if I don’t get selected for the one I applied), but that question goes in another thread!!

  1. Initial script:
 <script>

let links = Array.from(document.querySelectorAll('.link-slider'));
let slides = Array.from(document.querySelectorAll('.carousel-3d-slide'));

const handleClick = (e) => {
  //e.preventDefault();

  if (!e.target.closest(".carousel-3d-slide").classList.contains("current")) {
      e.preventDefault()
  }

  slides.forEach(slide => {
  if (slide.classList.contains('current')){
    e.target.closest("a").classList.add("current");
  }

  
  });

}

links.forEach(link => {
  //link.classList.remove('current');
  link.addEventListener('click', handleClick)
});

</script>

and for the callback:

let links = Array.from(document.querySelectorAll('.link-slider'));
let slides = Array.from(document.querySelectorAll('.carousel-3d-slide'));

const handleClick = (e) => {
  //e.preventDefault();

  if (!e.target.closest("a").classList.contains("current")) {
      e.preventDefault()
  }
  
  links.forEach(link => {
    link.classList.remove('current');
  });

  slides.forEach(slide => {
  if (slide.classList.contains('current')){
    e.target.closest("a").classList.add("current");
  }

  
  });
}

links.forEach(link => {
  //link.classList.remove('current');
  link.addEventListener('click', handleClick)
});

Hi! There’s a problem with the code right now as it is:

Uncaught SyntaxError: redeclaration of const handleClick
    <anonymous> http://localhost/wordpress/wp-content/themes/***/vue-init.js:1

If I replace “const” by “var” here those warnings are gone, and resizing the windows loads properly the contents, but now the click behavior is lost and have other issues like jumping to the top. How should I fix this?

Also replaced “let” here by “var” solves problems of re-declaration as well.

var links = Array.from(document.querySelectorAll('.link-slider'));
var slides = Array.from(document.querySelectorAll('.carousel-3d-slide'));