如果列表项单击并更改其他项，则更改背景颜色

Question

for (const doc of docs) {
    // create a `div` element
    const div = document.createElement("li");
    div.classList.add("list-group-item");
    div.style.border = "none";

    // add a text node to it
    div.appendChild(document.createTextNode(doc.name));

    // add event listeners to change its background
    div.addEventListener("mouseover", e => { div.style.background = "#e9ecef"; });
    if (div.style.backgroundColor !== "#e9ecef") {
        div.addEventListener("mouseout", e => { div.style.background = "white"; });
    }
    // add a `click` listener
    div.addEventListener("click", e => {
        updateInput(doc);

        var listGroup = document.getElementById("list-group-row").getElementsByTagName('li');
    });

    // add the new div to the container
    container.appendChild(div);
}

This is a loop that I add list-items into my container. The addEventListener for mouseover and mouseout gives an effect for changing background color when we hover and change back to white when hovered out.

My problem is in the addEventListener click part. I tried to change the .style.backgroundColor of div , but obviously this changes the color of other list-items to since it's inside a for-loop.

What is the best way to make individual list-item to change backgroundColor onClick and change back when other item is clicked?

I also want to keep the mouseover and mouseout effect.

FULL CODE:

    VSS.getService(VSS.ServiceIds.ExtensionData)
    // the callback on the next line returns a promise, which the JavaScript engine will follow, so you don't need to nest the next `then`
        .then((dataService) => dataService.getDocuments('MyCollection2'))
        .then((docs) => {
            // keep a reference to the element instead of searching for it in each loop.
            const container = document.getElementById('items');

            // this loop will remove any existing children
            while (container.firstChild !== null) {
                container.removeChild(container.firstChild);
            }

            // `for...of` is a simpler way to iterate over a collection
            for (const doc of docs) {
                // create a `div` element
                const div = document.createElement("li");
                div.classList.add("list-group-item");
                div.style.border = "none";

                // add a text node to it
                div.appendChild(document.createTextNode(doc.name));

                // add event listeners to change its background
                div.addEventListener("mouseover", e => { div.style.background = "#e9ecef"; });
                div.addEventListener("mouseout", e => { div.style.background = "white"; });

                // add a `click` listener
                //get all the elements with calss list-group-item
                [...document.querySelectorAll('.list-group-item')].forEach(function(item) {
                    // iterate and add event lstener to each of them
                    item.addEventListener('click', function(elem) {
                        // check if any element have a class active
                        // if so then remove the class from it
                        let getElemWithClass = document.querySelector('.clicked');
                        if (getElemWithClass !== null) {
                            getElemWithClass.classList.remove('clicked');
                            getElemWithClass.classList.add('unClicked')
                        }
                        //add the active class to the element from which click event triggered
                        item.classList.add('clicked')

                    })
                })


                // add the new div to the container
                container.appendChild(div);
            }
        });

Answer 1

You may not need to attach the event inside the loop. Create a new function to attach the event but call this function only when the loop have finished it's execution depends on the availability of the element with class list-group-item

 //get all the elements with calss list-group-item [...document.querySelectorAll('.list-group-item')].forEach(function(item) { // iterate and add event lstener to each of them item.addEventListener('click', function(elem) { // check if any element have a class active // if so then remove the class from it let getElemWithClass = document.querySelector('.active'); if (getElemWithClass !== null) { getElemWithClass.classList.remove('active'); } //add the active class to the element from which click event triggered item.classList.add('active') }) }) 

 .active { color: green; font-size: 24px; } 

 <li class="list-group-item"> 1 </li> <li class="list-group-item"> 2 </li> <li class="list-group-item"> 3 </li> <li class="list-group-item"> 4 </li>