functions don't no longer work after rewriting code into javascript

Question

I have a list with people's data inside it has a li element with 3 p tags inside, one for name, one for address and one for email.

I filled this list manually but due to some changes to my code I had to rewrite this so the html would be made with javascript.

My code looked like this

<p class="adres">@logopedist.Adres</p>
<p class="email">@logopedist.Email</p>
<p class="mobiel">@logopedist.Mobiel</p>

I rewrote this to build the html using javascript. This looks something like this.

var li = document.createElement('li');
li.className = "lijst";
li.id = "lijst";
li.onclick = "ficheVullen(this)";
p.className = "naam";
p.innerHTML = objLogos.Naam[i];
li.appendChild(p);
p.className = "adres";
p.innerHTML = objLogos.Adres[i];
li.appendChild(p);
var p = document.createElement('p');
p.className = "mobiel";
p.innerHTML = objLogos.Mobiel[i];
li.appendChild(p);

My list generates properly. But in my old code I had this at the start of the list.

<li class="lijst" onclick="ficheVullen(this)">

Whenever you would click an li element it would fill a div with the info from the p tags inside that li, so it would fill the div with name, address, mobile,etc I cannot seem to get this function to work anymore. It only works on the very first LI element and only works for the name. Even though my code is the same and I append classes to the tags like it had in my old code.

The function looks like this:

function ficheVullen() {
     FicheNaam = document.getElementById("FicheNaam");
     FicheAdres = document.getElementById("FicheAdres");
     FicheGSM = document.getElementById("FicheGSM");
     FicheNaam.innerHTML = this.querySelector('.naam').textContent;
     FicheGSM.innerHTML = this.querySelector('.mobiel').textContent;
     FicheAdres.innerHTML = this.querySelector('.adres').textContent;

I get this error now. Cannot read property 'textContent' of null

I call this function here:

window.onload = function() {
    changePage(1);
    document.getElementById("lijst").addEventListener("click", ficheVullen);
};

The changepage function is part of my pagination where I use javascript to build the list. When I move the eventlistener out of this I get this error: Cannot read property 'addEventListener' of null.

I hope this gives enough context

Answer 1

You have to use setAttribute to set id.

elm.setAttribute("id", "uniqueId");

Your case: li.setAttribute("id", "lijst")

li.id = "lijst"; will add "id" to object not as attribute

 const parent = document.getElementById("container") let elm = document.createElement("p") elm.setAttribute("id", "pElm") elm.innerText = "p tag" parent.append(elm) document.getElementById("pElm").style.background = "red"

 <div id="container"></div>