CODEWITHSUNDEEP
javascripthtmllistappendchild
Fadrick
Fadrick

Reputation: 69

How to append items from array to list

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);
}

Upvotes: -1

Views: 76

Answers (3)

baibhav saxena
baibhav saxena

Reputation: 9

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);
    }

Upvotes: 0

Techjori
Techjori

Reputation: 26

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.

Upvotes: 1

trincot
trincot

Reputation: 351019

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

Upvotes: 0

Related Questions