How to target a specific div with Javascript

Stinray 0
Viewed 51

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 class="vouchers">
            <span class="voucherstitle">Gutscheine</span>
            <div class="voucher" id="voucher1">
                <div class="carousel-container">
                    <button id="prevBtn">←</button>
                    <button id="nextBtn">→</button>
                    <div class="carousel-slide">
                        <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 class="voucher" id="voucher2">
                <div class="carousel-container">
                    <button id="prevBtn">←</button>
                    <button id="nextBtn">→</button>
                    <div class="carousel-slide">
                        <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!

javascript css html
2 Answers

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 class="carousel-slide". 
// 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.

usern2610

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');
blenmat940
Related