How to target a specific div with Javascript-CodePudding

I'm sorry that I bother in this manner... I think I have a really simple problem, but I can't get a fix for it...

(I'm using vanilla Javascript)

I have multiple image carousels in a page, and I cannot make them work.

I managed to make one carousel to work, but if I insert a second one, it doesn't work.

I tried to give id for each div that represents a carousel id="voucher1" and target them in javascript with

carouselA = carousel('#voucher1')
function carousel(id){
   const carouselSlide = document.querySelector(id   '.carousel-slide');
}

but it doesn't work...

This is my HTML

        <div >
            <span >Gutscheine</span>
            <div  id="voucher1">
                <div >
                    <button id="prevBtn">←</button>
                    <button id="nextBtn">→</button>
                    <div >
                        <img src="images/vouchers/firstvoucher/voucher3.jpg" id="lastclone" alt="">
                        <img src="images/vouchers/firstvoucher/voucher1.jpeg">
                        <img src="images/vouchers/firstvoucher/voucher2.jpg">
                        <img src="images/vouchers/firstvoucher/voucher3.jpg">
                        <img src="images/vouchers/firstvoucher/voucher1.jpeg" id="firstclone" alt="">
                    </div>
                </div>
            </div>
            <div  id="voucher2">
                <div >
                    <button id="prevBtn">←</button>
                    <button id="nextBtn">→</button>
                    <div >
                        <img src="images/vouchers/firstvoucher/voucher3.jpg" id="lastclone" alt="">
                        <img src="images/vouchers/firstvoucher/voucher1.jpeg">
                        <img src="images/vouchers/firstvoucher/voucher2.jpg">
                        <img src="images/vouchers/firstvoucher/voucher3.jpg">
                        <img src="images/vouchers/firstvoucher/voucher1.jpeg" id="firstclone" alt="">
                    </div>
                </div>
            </div>
        </div>

and this is my JavaScript

carousel('#voucher1');
carousel('#voucher2');

function carousel(id){
    const carouselSlide = document.querySelector(id   '.carousel-slide');
    const carouselImages = document.querySelectorAll(id   '.carousel-slide img')
    
    const prevBtn = document.querySelector(id   '#prevBtn');
    const nextBtn = document.querySelector(id   '#nextBtn');
    
    let counter = 1;
    let size = carouselImages[0].clientWidth;
    carouselSlide.style.transform = 'translateX('   (-size * counter)   'px)'
    
    nextBtn.addEventListener('click', () =>{
        let size = carouselImages[0].clientWidth;
        if(counter<0) return;
        carouselSlide.style.transition = "transform 0.4s ease-in-out";
        counter  ;
        carouselSlide.style.transform = 'translateX('   (-size * counter)   'px)';
    
        nextBtn.disabled=true;
        setTimeout(function(){
            nextBtn.disabled=false;
        },400)
    });
    
    prevBtn.addEventListener('click', () =>{
        let size = carouselImages[0].clientWidth;
        carouselSlide.style.transition = "transform 0.4s ease-in-out";
        counter--;
        carouselSlide.style.transform = 'translateX('   (-size * counter)   'px)';
    
        prevBtn.disabled=true;
        setTimeout(function(){
            prevBtn.disabled=false;
        },400)
    });
    
    carouselSlide.addEventListener('transitionend', () =>{
        let size = carouselImages[0].clientWidth;
        if(carouselImages[counter].id === 'lastclone'){
            carouselSlide.style.transition = "none";
            counter = carouselImages.length-2;
            carouselSlide.style.transform = 'translateX('   (-size * counter)   'px)';
        }
        if(carouselImages[counter].id === 'firstclone'){
            carouselSlide.style.transition = "none";
            counter = carouselImages.length - counter;
            carouselSlide.style.transform = 'translateX('   (-size * counter)   'px)';
        }
    });
    
    window.addEventListener('resize', function(event) {
        let size = carouselImages[0].clientWidth;
        carouselSlide.style.transition = "none";
        carouselSlide.style.transform = 'translateX('   (-size * counter)   'px)';
    }, true);
}

I'm one again sorry... Maybe this is a simple problem to fix, but I cannot get a solution for it... Thanks in advance!

CodePudding user response：

Here are some problems:

// XXX 
// Unused, undeclared identifier:
carouselA = carousel('#voucher1')


function carousel(id){
// XXX 
// ID selector begins with octothorpe, #.
// XXX
// No element exists with id="voucher1" and . 
// You need a space between the two to select the descendant.
document.querySelector(id   '.carousel-slide');
}

Instead:

document.querySelector(id   ' .carousel-slide');

Name variables what they are. For any function param named id, pass just the element id and change the callee to reflect that. Else, if you want to pass in the prefixed octothorpe, rename the param idSelector.

CodePudding user response：

In your javascript file you have called your function before initialising it. You should always initialise a function before calling it otherwise you will get an error. Try swapping them around and see if that works:

//Initialise the function
function carousel(id){
(Your function here)
}

//Then call the function
carousel('#voucher1');
carousel('#voucher2');