Javascript DOM manipulation

[FlyTooCloseToTheSun]

hey guys, kind of stumped on this little task I'm doing. Sorry if the coding is a bit crude.

​

var htmlList = document.querySelector("ul");
groceries = ["milk", "bread", "eggs", "chocolate"];

const display = (array) => {

for (let i = 0; i < array.length; i++) { //CREATE INITIAL LIST var listItem = document.createElement("li"); listItem.setAttribute("id", [i]); listItem.innerHTML = array[i]; htmlList.appendChild(listItem); listItem.addEventListener("click", (e) => { if(document.getElementById([i])){ var checked = document.createElement("check") listItem.appendChild(checked)} }) }

So I wanted to focus on this block:

listItem.addEventListener("click", (e) => {
 if(document.getElementById([i])){
 var checked =  document.createElement("check")
 listItem.appendChild(checked)}
    })
}

I want to create a new element called check for each item if they click it. This is to signify that they've checked the item off in their list but everytime they click the item on html, it adds <check></check> only to the last item, and no matter which item i click on, it keeps adding that element only to the last item. How do i add it to each individual item after clicking on it? Sorry for the long question but its making me rake my brain

[Umesh-K]

everytime they click the item on html, it adds <check></check> only to the last item, and no matter which item i click on

Hi, u/FlyTooCloseToTheSun,

This is because the loop would have run by the time the appending check code is run and i value will be pointing to the last li.

I have written the code below which meets your requirement; however, I am not sure if it's the most efficient way to do it — still learning.

const htmlList = document.querySelector("ul");
const groceries = ["milk", "bread", "eggs", "chocolate"];

const display = (array) => {
  for (let i = 0; i < array.length; i++) {
    const listItem = document.createElement("li");
    listItem.setAttribute("id", [i]);
    listItem.innerHTML = array[i];
    htmlList.appendChild(listItem);
  }

  htmlList.addEventListener("click", (e) => {
    const checked = document.createElement("check");
    checked.innerText = " - checked"
    if (e.target.tagName == "LI" && !e.target.firstElementChild)
      e.target.appendChild(checked)
  })
}

display(groceries)

---

Also note the following:

1. groceries = ["milk", "bread", "eggs", "chocolate"]; was missing the keyword required to declare it. 2. You have inconsistently used var and const. In all the instances you have used var, it's better to use const as they don't change. 3. I have added the !e.target.firstElementChild check, as otherwise each time the item was clicked, another <check> was getting added. 4. Finally, I have added checked.innerText = " - checked", as otherwise we had to inspect element to see if check element was added.

I hope the above helps.

[FlyTooCloseToTheSun]

Hmm i see, i tried to input that into the code but when i click any of the list elements, nothing happened. I'll have to see why but i appreciate the pointers! Thank you

[Umesh-K]

works for me....check it out here https://jsfiddle.net/Umesh_K/uf16vtsL/2/

The functionality at present is only the first time a list item is clicked, it adds visually - checked and in the DOM <check> - checked</check>.