My carousel runs well except bullet javascipt

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">
const slides = [
        "tagLine":"Impressions tous formats <span>en boutique et en ligne</span>"
        "tagLine":"Tirages haute définition grand format <span>pour vos bureaux et events</span>"
        "tagLine":"Grand choix de couleurs <span>de CMJN aux pantones</span>"
        "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');
    if (i == 0) { 

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

interval = setInterval(showSlide, 5000);

here is my reposotory github :

thanks for your help

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

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;



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

i cannot access to the replit

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

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

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

Thanks a lot. Problem solved. Have a nice day

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.