Question 237780 in Javascript Question posted in
A very good W3school tutorial can be found here.

javascript click scrollby with multi element

I have a scroll script that scrolls left or right when an icon is clicked. Works great too. But now I have several elements on one page. Only the first element works.

Somehow I don’t know anymore. Who can help?

var myEle = document.getElementsByClassName("test-js");

if(myEle) {
    const gallery = document.querySelector('.test-js');
    const gallery_scroller = gallery.querySelector('.horizontal-scroll-js');
    const gallery_item_size = gallery_scroller.querySelector('div').clientWidth - 60;

    gallery.querySelector('.icon-scroll-next').addEventListener('click', scrollToNextPage);
    gallery.querySelector('.icon-scroll-nrev').addEventListener('click', scrollToPrevPage);

    function scrollToPrevPage() {
        gallery_scroller.scrollBy(-gallery_item_size, 0);
    }

    function scrollToNextPage() {
        gallery_scroller.scrollBy(gallery_item_size, 0);
    }
}
Tags:

2

Answers


  1. 0

    Turn it into a function and apply it to multiple instances:

    function gallery( gallery ){

  if( gallery ){
  
      const gallery_scroller = gallery.querySelector('.horizontal-scroll-js');
      const gallery_item_size = gallery_scroller.querySelector('div').clientWidth - 60;

      gallery.querySelector('.icon-scroll-next').addEventListener('click', scrollToNextPage);
      gallery.querySelector('.icon-scroll-nrev').addEventListener('click', scrollToPrevPage);

      function scrollToPrevPage() {
          gallery_scroller.scrollBy(-gallery_item_size, 0);
      }

      function scrollToNextPage() {
          gallery_scroller.scrollBy(gallery_item_size, 0);
      }
      
  }

}


gallery( document.querySelector(".test-js") );
gallery( document.querySelector(".test-js-2") );

    Now you can call gallery as many times as you need to!

    Login or Signup to reply.
  2. 0

    class name or attributes or id doesn’t matter for event listening. you can register event listeners for all elements with or without same classname. important part is to target correct elements.
    There are several ways to fix your problem but I don’t know about your HTML tree.

    FYI;
    var myEle = document.getElementsByClassName("test-js"); and
    const gallery = document.querySelector('.test-js'); selects the same element which is the 1st element with test-js class.

    I’ll use @somethinghere’s solution;

    const allElementsToScroll = document.querySelectorAll(".test-js");

allElementsToScroll.forEach((element)=>{
gallery(element);

})
function gallery( gallery ){

  if( gallery ){
  
      const gallery_scroller = gallery.querySelector('.horizontal-scroll-js');
      const gallery_item_size = gallery_scroller.querySelector('div').clientWidth - 60;

      gallery.querySelector('.icon-scroll-next').addEventListener('click', scrollToNextPage);
      gallery.querySelector('.icon-scroll-nrev').addEventListener('click', scrollToPrevPage);

      function scrollToPrevPage() {
          gallery_scroller.scrollBy(-gallery_item_size, 0);
      }

      function scrollToNextPage() {
          gallery_scroller.scrollBy(gallery_item_size, 0);
      }
      
  }

}

    keep in mind; this method would work fine only in the condition that no other element in DOM has "test-js" class. It is better/safer to target elements with ids, specific attributes or class combinations etc.

    Also I assume that your test-js parentNode contains all relevant childNodes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search