the second dot does not become active when the image changes-CodePudding

I created a little automatic slider that changes image every 4 seconds so I call my function with

setInterval(displayImage, 4000);.

The images are changed perfectly; when the first image is shown the first dot present (represented by ol) remains active , while the second remains disabled and so far so good.

When the image changes, i.e. the second is shown, both remain disabled (while I want the first to be disabled and the second dot active).

Where am I doing wrong? This is my code:

function displayImage() {
    let nodeList = document.querySelectorAll(".sliderimg");
    let pointer = document.querySelectorAll("ol.controlnav li a")
    for (let i = 0; i < nodeList.length; i  ) {
        for (let j = 0; j < pointer.length; j  ) {
            if (nodeList[i].classList.contains("active")) {
                nodeList[i].classList.remove("active");
                pointer[j].classList.remove("controlactive");
            }
            nodeList[count].classList.add("active");
            pointer[count].classList.add("controlactive")
        }
    }
    count  = 1;
    if (count == nodeList.length) {
        count = 0;
    }
}

.containimg .sliderimg {
    display: none;
}

.containimg .sliderimg.active.imageright {
    display: flex;
    animation: opac 0.8s;
}

.containimg .sliderimg.active.imageright2 {
    display: flex;
    animation: opac 0.8s;
}

.containimg .sliderimg.active.imageright3 {
    display: block;
    position: relative;
}

.imageright {
    background-image: url('https://themewagon.github.io/jackson/images/img_bg_2.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

.imageright2 {
    background-image: url('https://themewagon.github.io/jackson/images/img_bg_1.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: none;
    align-items: center;
    position: relative;
}

.controlnav {
    position: absolute;
    text-align: center;
    bottom: 20px;
    z-index: 1000;
    left: 20px;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.controlnav li {
    margin: 8px;
}


.controlpaging li a {
    width: 12px;
    height: 12px;
    display: block;
    cursor: pointer;
    text-indent: -9999px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
}

.controlpaging li a.controlactive {
    background: rgba(147, 147, 147, 0.795);
}

<div >
    <div >
        <div >
            <h1>I am</h1>
            <h2>a Designer</h2>
            <h3>100% html5 bootstrap templates Made</h3>
            <h3>by <a href="#" >colorlib.com</a></h3>
            <button >view portfolio <i
                    ></i></button>
        </div>
        <ol >
            <li><a href="#" >1</a></li>
            <li><a href="#">2</a></li>
        </ol>
    </div>

    <div >
        <div >
            <h1>Hi!</h1>
            <h2>I'm Sarah</h2>
            <h3>100% html5 bootstrap templates Made</h3>
            <h3>by <a href="#" >colorlib.com</a></h3>
            <button >view portfolio <i
                    ></i></button>
        </div>
        <ol >
            <li><a href="#">1</a></li>
            <li><a href="#" >2</a></li>
        </ol>
    </div>
</div>

Can anyone kindly help me?

CodePudding user response：

Essentially the problem is that you're getting two independent collections of Nodes, but using the same index to dereference them.

.sliderimg gets two div elements but ol.controlnav li a gets four a elements. Your current code conflates these two independent collections.

If you are more specific about how you query your elements you will have more control and can use the same index:

count = 0;

function displayImage() {
    // just get the active div (whichever one it is) and de-activate it
    let nodeList = document.querySelectorAll(".sliderimg.active");
    for (let node of nodeList) {
        node.classList.remove("active");
        // just get the active `a` element that's a child of the active node
        let pointer = node.querySelector("ol.controlnav li a.controlactive")
        if (pointer) pointer.classList.remove("controlactive");
    }
    
    // just activate whichever div is next (and it's child a elem)
    nodeList = document.querySelectorAll(".sliderimg");
    nodeList[count].classList.add("active");
    let pointerList = nodeList[count].querySelectorAll("ol.controlnav li a")
    pointerList[count].classList.add("controlactive")

    count  = 1;
    if (count == nodeList.length) {
        count = 0;
    }
}

setInterval(displayImage, 4000)

.containimg .sliderimg {
    display: none;
}

.containimg .sliderimg.active.imageright {
    display: flex;
    animation: opac 0.8s;
}

.containimg .sliderimg.active.imageright2 {
    display: flex;
    animation: opac 0.8s;
}

.containimg .sliderimg.active.imageright3 {
    display: block;
    position: relative;
}

.imageright {
    background-image: url('https://themewagon.github.io/jackson/images/img_bg_2.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

.imageright2 {
    background-image: url('https://themewagon.github.io/jackson/images/img_bg_1.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: none;
    align-items: center;
    position: relative;
}

.controlnav {
    position: absolute;
    text-align: center;
    bottom: 20px;
    z-index: 1000;
    left: 20px;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.controlnav li {
    margin: 8px;
}


.controlpaging li a {
    width: 12px;
    height: 12px;
    display: block;
    cursor: pointer;
    text-indent: -9999px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
}

.controlpaging li a.controlactive {
    background: rgba(147, 147, 147, 0.795);
}

<div >
    <div >
        <div >
            <h1>I am</h1>
            <h2>a Designer</h2>
            <h3>100% html5 bootstrap templates Made</h3>
            <h3>by <a href="#" >colorlib.com</a></h3>
            <button >view portfolio <i
                    ></i></button>
        </div>
        <ol >
            <li><a href="#" >1</a></li>
            <li><a href="#">2</a></li>
        </ol>
    </div>

    <div >
        <div >
            <h1>Hi!</h1>
            <h2>I'm Sarah</h2>
            <h3>100% html5 bootstrap templates Made</h3>
            <h3>by <a href="#" >colorlib.com</a></h3>
            <button >view portfolio <i
                    ></i></button>
        </div>
        <ol >
            <li><a href="#">1</a></li>
            <li><a href="#" >2</a></li>
        </ol>
    </div>
</div>