将代码改写成javascript后，函数不再工作。

Question

我有一个列表，里面有人们的数据，它有一个li元素，里面有3个p标签，一个是姓名，一个是地址，一个是电子邮件。

我手动填写了这个列表，但是由于我的代码发生了一些变化，我不得不重写这个列表，这样html就可以用javascript制作了。

我的代码是这样的

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

我重写了这个，用javascript建立html。这看起来像这样。

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

我的列表正常生成了。但在我的旧代码中，我在列表的开头有这样的内容。

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

每当你点击一个li元素，它就会用该li内的p标签的信息填充一个div，所以它会用姓名、地址、手机等填充div。它只在第一个LI元素上工作，而且只对名字有效。即使我的代码是一样的，我把类附加到标签上，就像我以前的代码一样。

该函数看起来像这样。

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;

我现在得到了这个错误： 无法读取属性'textContent'为null的元素。

我在这里调用这个函数。

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

changepage函数是我的分页的一部分，我用javascript来建立列表，当我把eventlistener移出这个函数时，我得到了这样的错误。无法读取属性'addEventListener'为null。

我希望这能提供足够的上下文

Answer 1

你必须使用 setAttribute 来设置ID。

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

你的情况下，.id将被添加到对象中，而不是作为属性。li.setAttribute("id", "lijst")

li.id = "lijst"; 将添加 "id "到对象中，而不是作为属性。

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>