将代码重写为 javascript 后功能不再起作用

Question

我有一个包含人员数据的列表，其中有一个 li 元素，其中包含 3 个 p 标签，一个用于名称，一个用于地址，一个用于 email。

我手动填写了这个列表，但由于对我的代码进行了一些更改，我不得不重写它，因此 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，我似乎无法让这个 function 工作了。 它只适用于第一个 LI 元素并且只适用于名称。 即使我的代码是相同的，并且我将 append 归类到标签，就像它在我的旧代码中一样。

function 看起来像这样：

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”

我在这里称之为 function：

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

更改页 function 是我使用 javascript 构建列表的分页的一部分。 当我将事件监听器移出时，出现此错误：无法读取 null 的属性“addEventListener”。

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

Answer 1

您必须使用setAttribute来设置 id。

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

你的情况： li.setAttribute("id", "lijst")

li.id = "lijst"; 将“id”添加到 object 而不是作为属性

 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>