Styles not being removed

HTML-CSS
1 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #clients_img_container {
        background: darkgray;
    }

    #clients_img_container img {
        max-width: 90px;
        margin: 35px 20px;
        transition: all ease 200ms;
        border-radius: 3px;
        opacity: 0.6;
    }
</style>
<body>
    <div id="clients_img_container">
        <img src="./assets/usp_customer_logos/Kamakshi Hospital.jpg" alt="">
        <img src="./assets/usp_customer_logos/Bank-of-Baroda.jpg" alt="">
        <img src="./assets/usp_customer_logos/Brigade_Group.jpg" alt="">
        <img src="./assets/usp_customer_logos/goodearth.jpg" alt="">
        <img src="./assets/usp_customer_logos/ISKCON.jpg" alt="">
        <img src="./assets/usp_customer_logos/L&T.jpg" alt="">
        <img src="./assets/usp_customer_logos/download.png" alt="">
        <img src="./assets/usp_customer_logos/Zuri.jpg" alt="">
        <img src="./assets/usp_customer_logos/RV Institutions.jpg" alt="">
        <img src="./assets/usp_customer_logos/The-Tamara-Resorts.jpg" alt="">
        <img src="./assets/usp_customer_logos/Leela.jpg" alt="">
        <img src="./assets/usp_customer_logos/Vidyasholp.jpg" alt="">
    </div>
    <script src="./main.js"></script>
</body>
</html>

main.js

const customer_logos = document.querySelectorAll("#clients_img_container img");
const num_logos = customer_logos.length;

let previous_highlighted_index = 0;

function toggle_highlight() {
    console.log("unhighlight prev one...");
    // unhighlight previous one
    customer_logos[previous_highlighted_index].style.opacity = "";
    customer_logos[previous_highlighted_index].style.transform = "";
    
    // select random index to highlight
    let random_logo_index = Math.floor(Math.random() * num_logos);
    
    console.log("highlight new one...");
    // highlight new one
    customer_logos[random_logo_index].style.opacity = "1";
    customer_logos[random_logo_index].style.transform = "scale(1.2)";
    
    previous_highlighted = random_logo_index;
}

setInterval(toggle_highlight, 2000);

When the interval kicks off, the styles are being added as intended but it’s not being removed in the next call. Could someone explain why that’s the case?

2

in toggle-highlight() function. in the very end, you try to change the value of previous_highlighted, but in fact, you want to target previous_highlighted_index.
In your first console.log i added the previous index, in the second log i added the new index value and i noticed previous index remains its initial value(0) for every call of the function, so it was easy to trackwhere the value fails to update. You should use more informative console.log's to return you values and actually see whats not working as expected.

3

Thank you. I was so confused why it was not working as intended.

4

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