What's wrong with my code, click event fires only once JavaScript?

Question

The loop works only once and then nothing happens. I have three testimonials, and can go only once forward or backwords.Thanks for help!

const nextBtn = document.querySelector(".next-btn");
const prevBtn = document.querySelector(".prev-btn");
const testimonials = document.querySelectorAll(".testimonial");

let index = 0;
window.addEventListener("DOMContentLoaded", function () {
  show(index);
});
function show(index) {
  testimonials.forEach((testimonial) => {
    testimonial.style.display = "none";
  });
  testimonials[index].style.display = "flex";
}

nextBtn.addEventListener("click", function () {
  index++;
  if (index > testimonials.length - 1) {
    index = 0;
  }
  show(index);
});

prevBtn.addEventListener("click", function () {
  index--;
  if (index < 0) {
    index = testimonials.length - 1;
  }
  show(index);
});

Any errors in your console? Post a minimal reproducible example please — j08691
– j08691, Commented Nov 12, 2021 at 15:54
Your code works just fine, there's not much we can offer you at this point. Check if you do have all the elements with testimonial. Also, set a breakpoint in your functions and look for any run problem. — Gil
– Gil, Commented Nov 12, 2021 at 16:00
You can use a Stack Snippet to make an executable minimal reproducible example — Barmar
– Barmar, Commented Nov 12, 2021 at 16:10
There is no errors in the console and all elements are with testimonial. — Marko Masulovic
– Marko Masulovic, Commented Nov 12, 2021 at 16:22

Mr. Polywhirl · Accepted Answer · 2021-11-12 16:14:53Z

I would use a "hidden" class to hide the non-active testimonials instead of manipulating the element's style in-line. Also, your navigation logic can be simplified to a modulo operation.

The code your originally posted seemed to work out well, but it seems to cluttered with redundancy (code reuse). It also lacks structural flow (readability).

const
  modulo = (n, m) => (m + n) % m,
  moduloWithOffset = (n, m, o) => modulo(n + o, m);

const
  nextBtn = document.querySelector('.next-btn'),
  prevBtn = document.querySelector('.prev-btn'),
  testimonials = document.querySelectorAll('.testimonial');

let index = 0;

const show = (index) => {
  testimonials.forEach((testimonial, currIndex) => {
    testimonial.classList.toggle('hidden', currIndex !== index)
  });
}

const navigate = (amount) => {
  index = moduloWithOffset(index, testimonials.length, amount);
  show(index);
}

// Create handlers
const onLoad = (e) => show(index);
const onPrevClick = (e) => navigate(-1);
const onNextClick = (e) => navigate(1);

// Add handlers
window.addEventListener('DOMContentLoaded', onLoad);
nextBtn.addEventListener('click', onNextClick);
prevBtn.addEventListener('click', onPrevClick);

.testimonial {
  display: flex;
}

.testimonial.hidden {
  display: none;
}

<div>
  <button class="prev-btn">Prev</button>
  <button class="next-btn">Next</button>
</div>
<div>
  <div class="testimonial">A</div>
  <div class="testimonial">B</div>
  <div class="testimonial">C</div>
  <div class="testimonial">D</div>
  <div class="testimonial">E</div>
  <div class="testimonial">F</div>
</div>

testimonial.classList.toggle('hidden', currIndex !== index) that expression is very new for me, thanks.

Collectives™ on Stack Overflow

What's wrong with my code, click event fires only once JavaScript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related