[英]functions don't no longer work after rewriting code into javascript
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.我有一个包含人员数据的列表,其中有一个 li 元素,其中包含 3 个 p 标签,一个用于名称,一个用于地址,一个用于 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.我手动填写了这个列表,但由于对我的代码进行了一些更改,我不得不重写它,因此 html 将与 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.我重写了这个以使用 javascript 构建 html。 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.每当您单击 li 元素时,它会使用该 li 内的 p 标签中的信息填充 div,因此它会使用名称、地址、移动设备等填充 div,我似乎无法让这个 function 工作了。 It only works on the very first LI element and only works for the name.
它只适用于第一个 LI 元素并且只适用于名称。 Even though my code is the same and I append classes to the tags like it had in my old code.
即使我的代码是相同的,并且我将 append 归类到标签,就像它在我的旧代码中一样。
The function looks like this: 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;
I get this error now.我现在得到这个错误。 Cannot read property 'textContent' of null
无法读取 null 的属性“textContent”
I call this function here:我在这里称之为 function:
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.更改页 function 是我使用 javascript 构建列表的分页的一部分。 When I move the eventlistener out of this I get this error: Cannot read property 'addEventListener' of null.
当我将事件监听器移出时,出现此错误:无法读取 null 的属性“addEventListener”。
I hope this gives enough context我希望这能提供足够的背景信息
You have to use setAttribute
to set id.您必须使用
setAttribute
来设置 id。
elm.setAttribute("id", "uniqueId");
Your case: li.setAttribute("id", "lijst")
你的情况:
li.setAttribute("id", "lijst")
li.id = "lijst";
will add "id" to object not as attribute将“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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.