My carousel runs well except bullet javascipt

[mjandia]

I put bullet. it’s ok. Each bullet is linked to correct image. That’s ok. but if i want to use bullet to change of image. It isn’t ok. What the issue ? Thanks for your help. I’ve tried to put addEventListenre but it broke my code. and setInterval don’t work to. It is an array where i takes data to build my code. Jsbin console indicate that it cannot read the dots.appendChild( dot) because it is null. But my code runs except maybe the part of function selected. Maybe it is that that i have to update. When i click on left or right the bullet change of position but when i click on bullet directly nothing

here is the html code :

<div id="banner">
            <img src="./assets/images/slideshow/slide1.jpg" alt="Banner print-it">
                    <p>Impressions tous formats <span>en boutique et en ligne</span></p>
            <img class="arrow_left" src="./assets/images/arrow_left.png" alt="image fleche gauche">
            <img class="arrow_right" src="./assets/images/arrow_right.png" alt="image fleche droite">
        <div class="dots">
        </div>
    </div>

const slides = [
    {
        "image":"slide1.jpg",
        "tagLine":"Impressions tous formats <span>en boutique et en ligne</span>"
    },
    {
        "image":"slide2.jpg",
        "tagLine":"Tirages haute définition grand format <span>pour vos bureaux et events</span>"
    },
    {
        "image":"slide3.jpg",
        "tagLine":"Grand choix de couleurs <span>de CMJN aux pantones</span>"
    },
    {
        "image":"slide4.png",
        "tagLine":"Autocollants <span>avec découpe laser sur mesure</span>"
    }
]
const banner = document.getElementById('#banner');
const left = document.querySelector('.arrow_left');
const right = document.querySelector('.arrow_right');
const imageElement = document.querySelector('#banner > img');
const nomElement = document.querySelector('#banner > p');

const numberOfSlide = slides.length;

let i = 0;
/* Create bullet (dot) */ 
function dots() {
    const dots = document.querySelector('.dots');
    for (let i = 0; i < numberOfSlide; i++) {
    const dot = document.createElement('span');
    dot.classList.add('dot');
    dots.appendChild(dot);
    if (i == 0) { 
        dots.children[i].classList.add('dot_selected');
    }
    }
 }
dots();

/* Link bullet to image (dot) */
 function selected() {
    const dot = document.getElementsByClassName('dot');
    for (let i = 0; i < dot.length; i++) {
        dot[i].classList.remove('dot_selected');
    }
    dot[i].classList.add('dot_selected');
 }
/* Link tagline and image to HTML*/
function showSlide() {
    imageElement.src = `./assets/images/slideshow/${slides[i].image}`;
    nomElement.innerHTML = slides[i].tagLine;
    console.log(imageElement);
    console.log(nomElement);
    selected();
}
/* Call function to move left */
left.addEventListener("click", function () {
    if (i == 0) {
        i = numberOfSlide - 1;
    }
    else {
        i--;
    }
        console.log(left);
        showSlide();
});
/* Call function to move right */   
right.addEventListener("click", function () {
    if (i == numberOfSlide - 1) {
        i = 0;
    } else {
            i++;
    }
    console.log(right);
    showSlide();
    console.log(showSlide);
});

interval = setInterval(showSlide, 5000);

[mjandia]

here is my reposotory github :

mjandia/Print-it-JS/blob/main/ReadMe.md

thanks for your help

[mjandia]

I didn’t understand the bullets don’t work that the problem, the arrow yes. What is a replit ?

[mjandia]

how to code that i don’t know i’m a biginner in javascript. I put 15 days to write that code. I put before that code :

dot.addEventListener(‘click’, function(){

i = i;

selected();

})

but it doesn’t work. How to do what you advise.

[mjandia]

i cannot access to the replit

[mjandia]

@camperextraordinaire

If you are wanting to be able to click on specific dot for a slide and have it load that slide’s image and text, then you could add a click event listener to each dot (inside the showDots function for loop and give each a unique id l(i.e. span0, span1, etc…). The event listener callback function would need to access the unique id of the dot clicked and capture the end number (representing the index of the slides array) and assign this value to i and then execute selected function.

ok thanks I will try tomorow. have a nice day.

[mjandia]

I’ve been just try what you did and the bullet move but not the image. normally it’s one bullet for each image. there are four bullet and four image in the array.I’m going to see that and I will do a reply. Thanks a lot

[camperextraordinaire]

I updated my suggested solution to how execute showSlide vs. selected.

[mjandia]

Thanks a lot. Problem solved. Have a nice day