用js从动态元素中获取id

Question

I created a dynamic list, each element has its own id but when I have to get it from javascript with document.getElementById an error is thrown (Cannot set properties of null (setting 'innerHTML')) how can I solve?

The element id are created correctly. <li id="item1">item1</li>

 //This is how I add a new element: var counter = 1; function addElement(){ var list = document.getElementById("list"); list.innerHTML += `<li id="item${counter}">item${counter}</li>`; } //This function is called when the button is clicked. //This function is called when the bottom for editing is clicked: function changeTxt(){ document.getElementById("changeID").innerHTML = document.getElementById("textChange").value; } //ChangeID is a variable saved in another function.

Answer 1

It might be because you didn't quoted the ID.

I think your element look like this rn : <li id=item64>item64</li>

and it must look like this instead : <li id="item64">item64</li>

Answer 2

Try adding += to your assignment, to not replace the list contents, but add to it. Otherwise you will only have one element in the list, which is the last counter value.

 const list = document.getElementById('list'); for (let counter = 1; counter < 4; ++counter) { list.innerHTML += `<li id="item${counter}">item${counter}</li>`; } console.log(document.getElementById("item3"));

 <ul id="list"></ul>

If it doesn't work, use inpect tool to check if elements were created correctly ;)