将代码重写为 JavaScript 后，函数不知道更长的工作

Question

我有一个包含人员数据的列表，里面有一个 li 元素，里面有 3 个 p 标签，一个用于姓名，一个用于地址，一个用于电子邮件。

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

我的代码看起来像这样

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

我现在收到此错误。无法读取 null 的属性"textContent">

我在这里调用这个函数：

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

changepage函数是我分页的一部分，我使用javascript来构建列表。 当我将事件侦听器移出此时，出现此错误：无法读取 null 的属性"addEventListener"。

我希望这能提供足够的背景

Answer 1

您必须使用setAttribute来设置 id。

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

您的案例 ：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>