Why does my Javascript code work on my 1st set of html code but, not the second set that is an exact-CodePudding

This is my HTML


    <section >
        <div >
          <ul >
    
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
                 <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
          </ul>
        </div>
      </section>
  <script src="js/infinite.js"></script>

THIS IS MY CSS

        .main{
   
     
 width: 50vw;

     
        }
          ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
        
     .carousel {
    position: relative;
    overflow: hidden;
 

  }
  
  .carousel__slider {
    position: relative;
    display: flex;
    align-items: center;
    width: 50vw;
    height: 400px;
  }
  
  .carousel__list {
    position: absolute;
    width: 260%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  
  .carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .carousel__item:hover {
    transform: scale(1.1);
    font-size: 30px;
    background-color: rgba(255, 255, 255, 0.7);
  }

THIS IS MY JAVASCRIPT

"use strict";

function carousel() {
  let carouselSlider = document.querySelector(".carousel__slider");
  let list = document.querySelector(".carousel__list");
  let item = document.querySelectorAll(".carousel__item");
  let list2;

  const speed = 1;

  const width = list.offsetWidth;
  let x = 0;
  let x2 = width;

  function clone() {
    list2 = list.cloneNode(true);
    carouselSlider.appendChild(list2);
    list2.style.left = `${width}px`;
  }

  function moveFirst() {
    x -= speed;

    if (width >= Math.abs(x)) {
      list.style.left = `${x}px`;
    } else {
      x = width;
    }
  }

  function moveSecond() {
    x2 -= speed;

    if (list2.offsetWidth >= Math.abs(x2)) {
      list2.style.left = `${x2}px`;
    } else {
      x2 = width;
    }
  }

  function hover() {
    clearInterval(a);
    clearInterval(b);
  }

  function unhover() {
    a = setInterval(moveFirst, 10);
    b = setInterval(moveSecond, 10);
  }

  clone();

  let a = setInterval(moveFirst, 10);
  let b = setInterval(moveSecond, 10);

  carouselSlider.addEventListener("mouseenter", hover);
  carouselSlider.addEventListener("mouseleave", unhover);
}

carousel();

THE CODE AND JAVASCRIPT WORKS GREAT HOWEVER!

IF I COPY AND PASTE MY HTML CODE TWICE IN MY HTML FILE!

The 1st carousel works but, the second set which is an exact duplicate of the 1st set does not work.

for example below I JUST DID A DUPLICATE OF THE CODE AND THE 1ST ONE WORKS BUT,THE SECOND ONE DOES NOTHING! Is there an explanation for why this happens ?

   <section >
        <div >
          <ul >
    
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
                 <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
          </ul>
        </div>
      </section>


   <section >
        <div >
          <ul >
    
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
                 <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
          </ul>
        </div>
      </section>

  <script src="js/infinite.js"></script>

I am not too sure where to start with this one on how to resolve it.

CodePudding user response：

document.querySelector finds the first element that matches the selector.

If you want to handle both, you'll need to use querySelectorAll to find the top level of all your carousels. Then you'll need to loop over that list and handle each carousel as its own entity. To do that you'll need to switch all your other code that finds element to use the previously mentioned entry point instead of document as the root to start searching.

CodePudding user response：

This is the expected behavior. You are using the Document.querySelector method which will only return the first element that matches. This is why your code only applies to the first carousel.

If you wanted to apply to all carousels in the document you should loop over the result of Document.querySelectorAll. Note that you would want your items to be the result of performing Element.querySelectorAll on the element. Instead of the pulling all of them from the document in this case.

Example code for handling multiple carousels:

function carousel(el) {
  let carouselSlider = el.querySelector(".carousel__slider");
  let list = el.querySelector(".carousel__list");
  let item = el.querySelectorAll(".carousel__item");
  let list2;

  // ... Original Code Here
}

for (const el of document.querySelectorAll(".carousel")) {
    carousel(el);
}

CodePudding user response：

As described here, document.querySelector only finds the first element that matches the selector.

If you want to get all elements, you should use document.querySelectorAll or document.getElementsByClassName in your case and then loop through them to implement your logic.

CodePudding user response：

Okay, so some of the answers here already explain that you're not selecting both sliders, but even if you do somethings will still not work as they need to be called in a different way. There are some ways to create a bit more abstract function that takes care of all you're carroussels. But that might be a though challenge considering the question. So I would suggest just some small altercations and adding ids to your carroussels so that we can recognice them. Let's use a parameter so that you don't need to copy the javscript part twice, but we will just activate that function twice telling it to use caroussel-1 or caroussel-2

Add the id's to your HTML elements:

<section  id="carousel-1">
    <!--Carousel HTML -->
</section>

<section  id="carousel-2">
    <!--Carousel HTML -->
</section>

Now a slight change at the few first lines in your html code and the lines at the end

"use strict";

let carousel1 = document.querySelector('#carousel-1');
let carousel2 = document.querySelector('#carousel-2')

function carousel(carouselId) {
  let carouselSlider = carouselId.querySelector(".carousel__slider");
  let list = carouselId.querySelector(".carousel__list");
  let item = carouselId.querySelectorAll(".carousel__item");
  let list2;

  const speed = 1;

  const width = list.offsetWidth;
  let x = 0;
  let x2 = width;

  function clone() {
    list2 = list.cloneNode(true);
    carouselSlider.appendChild(list2);
    list2.style.left = `${width}px`;
  }

  function moveFirst() {
    x -= speed;

    if (width >= Math.abs(x)) {
      list.style.left = `${x}px`;
    } else {
      x = width;
    }
  }

  function moveSecond() {
    x2 -= speed;

    if (list2.offsetWidth >= Math.abs(x2)) {
      list2.style.left = `${x2}px`;
    } else {
      x2 = width;
    }
  }

  function hover() {
    clearInterval(a);
    clearInterval(b);
  }

  function unhover() {
    a = setInterval(moveFirst, 10);
    b = setInterval(moveSecond, 10);
  }

  clone();

  let a = setInterval(moveFirst, 10);
  let b = setInterval(moveSecond, 10);

  carouselSlider.addEventListener("mouseenter", hover);
  carouselSlider.addEventListener("mouseleave", unhover);
}

carousel(carousel1);
carousel(carousel2);

CodePudding user response：

   **The output is got three picture logos**

"use strict";

function carousel() {
  let carouselSlider = document.querySelector(".carousel__slider");
  let list = document.querySelector(".carousel__list");
  let item = document.querySelectorAll(".carousel__item");
  let list2;

  const speed = 1;

  const width = list.offsetWidth;
  let x = 0;
  let x2 = width;

  function clone() {
    list2 = list.cloneNode(true);
    carouselSlider.appendChild(list2);
    list2.style.left = `${width}px`;
  }

  function moveFirst() {
    x -= speed;

    if (width >= Math.abs(x)) {
      list.style.left = `${x}px`;
    } else {
      x = width;
    }
  }

  function moveSecond() {
    x2 -= speed;

    if (list2.offsetWidth >= Math.abs(x2)) {
      list2.style.left = `${x2}px`;
    } else {
      x2 = width;
    }
  }

  function hover() {
    clearInterval(a);
    clearInterval(b);
  }

  function unhover() {
    a = setInterval(moveFirst, 10);
    b = setInterval(moveSecond, 10);
  }

  clone();

  let a = setInterval(moveFirst, 10);
  let b = setInterval(moveSecond, 10);

  carouselSlider.addEventListener("mouseenter", hover);
  carouselSlider.addEventListener("mouseleave", unhover);
}

carousel();

.main{


width: 50vw;


      }
        ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

   .carousel {
  position: relative;
  overflow: hidden;


}

.carousel__slider {
  position: relative;
  display: flex;
  align-items: center;
  width: 50vw;
  height: 400px;
}

.carousel__list {
  position: absolute;
  width: 260%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.carousel__item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.carousel__item:hover {
  transform: scale(1.1);
  font-size: 30px;
  background-color: rgba(255, 255, 255, 0.7);
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <section >
        <div >
          <ul >

            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
                 <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
          </ul>
        </div>
      </section>


   <section >
        <div >
          <ul >

            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
                 <li >
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
          </ul>
        </div>
      </section>

  <script src="js/infinite.js"></script>

  </body>
</html>