How to append items from array to list

Question

How to append items from array to list

74 Views Asked by Fadrick At 22 January 2024 at 15:35

I have an array "stringsArray" and I need to append all its items to a div as "li" items. That should happen when the person hovers over the div. The "li" elements should also be removed when the div is not being hovered anymore. The problem is that when I hover the div, an infinite number of "li" elements is created. Also, the li elements are not being removed when not hovering. What is wrong with my code?

HTML

<div id="topics-div">Topics</div>

JS

let stringsArray = [
    "Topic 1",
    "Topic 2",
    "Topic 3",
    "Topic 4",
    "Topic 5"
]

let topicsDiv = document.getElementById("topics-div");

let topicUl = document.createElement("ul");

topicsDiv.onmouseover = function(){
    topicsDiv.append(topicUl);
       for(i = 0; i <= stringsArray.length; i++){
           let liElement = document.createElement("li");
           liElement.textContent = stringsArray[i];
           topiclUl.appendChild(liElement);
    }
}


topicsDiv.onmouseout = function(){
   let liElement = topicsDiv.querySelector("li");
       topicsDiv.removeChild(liElement);
}

Original Q&A

There are 3 best solutions below

trincot On 22 January 2024 at 15:44

There are a few issues:

liElement will get only one li element, not all of them, so you cannot expect the mouseout handler to remove all of them.
topicsDiv is not the parent of liElement, so topicsDiv.removeChild(liElement) will not work -- it will actually trigger an error which you should see in the console.
In the mouseover handler you have a typo: topiclUl is not topicUl. Also this should lead to an error message in the console.

To fix this you could iterate over all li elements to delete them one by one, but it is much easier to just clear the content in the ul element, so just do:

topicUl.innerHTML = ""; // This removes all those LI elements
topicsDiv.removeChild(topicUl);  // Optional

baibhav saxena On 22 January 2024 at 16:07

Here the problem is in your onmouseout function. You need to remove all the li but your function is selecting li as query selector and then removing the child of the same.

what you need to do is you have to recursively remove the Li and ideally you should remove the UL as well as.

Here's is the working '**onmouseout**'-

topicsDiv.onmouseout = function () {
        // Remove all li elements
        while (topicUl.firstChild) {
            topicUl.removeChild(topicUl.firstChild);
        }

        // Remove the ul element- This is optional ideally you should remove the UL as well.
        topicsDiv.removeChild(topicUl);
    }

**Techjori** · Accepted Answer · 2024-01-22T16:03:03.460000

Your code has a couple of issues that need to be addressed. Here's the corrected version:

let stringsArray = [
    "Topic 1",
    "Topic 2",
    "Topic 3",
    "Topic 4",
    "Topic 5"
];

let topicsDiv = document.getElementById("topics-div");
let topicUl = document.createElement("ul");

topicsDiv.onmouseover = function() {
    topicsDiv.appendChild(topicUl);

    for (let i = 0; i < stringsArray.length; i++) {
        let liElement = document.createElement("li");
        liElement.textContent = stringsArray[i];
        topicUl.appendChild(liElement);
    }
};

topicsDiv.onmouseout = function() {
    while (topicUl.firstChild) {
        topicUl.removeChild(topicUl.firstChild);
    }

    topicsDiv.removeChild(topicUl);
};

<!DOCTYPE html>
<html>

<body>
<div id="topics-div">Topics</div>
</body>

</html>

Changes made:

Fixed the typo in topiclUl to topicUl in the loop where you are appending li elements.
Changed the loop condition to i < stringsArray.length to prevent accessing an undefined element in the array.
Used a while loop to remove all child elements of the ul when the mouse leaves the div.

This should resolve the issue of infinite li elements being created and not being removed when not hovering.

How to append items from array to list

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in LIST

Related Questions in APPENDCHILD

Trending Questions

Popular # Hahtags

Popular Questions