Set id to newly created elements

This is mine first question, I’m glad to be part of this community.

Like I said in the title. I want to set ID to newly created elements. I don’t know what I’m doing incorrectly.

This is mine code sample:

function DataBack(response) {
var ci_output = document.getElementById('ci_output');
data = JSON.parse(response);
for (i = 0; i < data.result.length; i++) {
    var li = document.createElement("p");
    li.setAttribute("id",'cmdbitem' + i);
    li.setAttribute('onclick', 'displayDetails(data.result[' + i + '])');
    document.getElementById('cmdbitem' + i).onclick = changeColor; //this function is throwing error "Uncaught TypeError: document.getElementById(...) is null"
    li.innerHTML = data.result[i].name;
    ci_output.appendChild(li);
    }
 }

What i want to achieve is to change color for newly created item which user click on. For this i need ID. I made test and ID is set because e.g. this specific element is behave like it should

#cmdbitem2 {
cursor : pointer;

}

Why this document.getElementById(‘cmdbitem’ + i).onclick = changeColor; is throwing an error ?

Thanks from advance.

Answer

because the new element li is not inserted to document yet (which happends at ci_output.appendChild(li);).

but you can simply use li here, no need to get it though getElementById


Here is a complete example from your code.

for (let i = 0; i < data.result.length; i++) {
   let li = document.createElement("p")
   li.id = 'cmdbitem' + i
   li.addEventListener('click', ()=>displayDetails(data.result[i]))
   li.addEventListener('click', changeColor)
   li.innerHTML = data.result[i].name
   ci_output.appendChild(li)
}

some reference:

  • arrow function (you can also use normal function)
  • let (Always use let instead of var)