Question

我正在尝试使用JavaScript在每个li上放置一个删除按钮，并创建一个在单击按钮时运行的事件处理程序，该处理程序将删除li。但是，当我尝试添加处理程序时，我得到：

无法读取null
的属性'addEventListener'

我认为这是因为我在运行函数createbtn之前引用了一个不存在的类。那么我该如何解决这个问题呢？

守则：

我设置变量，将querySelector放到按钮中，因为我测试了如何操作：

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var list = document.querySelectorAll ("li");
var buttons = document.querySelector (".btn-danger");
var li = document.createElement("li")

我如何创建按钮：

function createbtn() {
    for (var i = 0; i < list.length; i++) {
      var btn = document.createElement("button");
      btn.appendChild(document.createTextNode("Delete"));
      btn.classList.add("btn", "btn-danger","btn-sm");
      list[i].appendChild(btn);
    }
}

我尝试运行的功能：

function liDel(){
    li.parentNode.removeChild(li);
 }

buttons.addEventListener("click", liDel);

这是我的fiddle，可以查看所有代码。

Answer 1

您收到空错误的原因是因为;

您已将变量buttons分配给尚未存在的节点。（请注意，该按钮是在页面加载后创建的，这意味着当时尚未创建.btn-danger）。
根据MDN，querySelector方法执行ff：

Document方法querySelector（）返回文档中与指定选择器或选择器组匹配的第一个Element。如果未找到匹配项，则返回 null 。

根据你在小提琴中的代码，这里是一个实现预期结果的指南。

首先，摆脱第6行的全局li变量。原因是如果你从输入创建一个新的li，它将在同一行上呈现，因为它仍然引用相同的元素节点（我确定你已经意识到了）

然后在你的createListElement函数中，执行ff

function createListElement() {
  var li = document.createElement('li');
  li.appendChild(document.createTextNode(input.value));
  var btn = document.createElement("button");
  btn.appendChild(document.createTextNode("Delete"));
  btn.classList.add("btn", "btn-danger","btn-sm");
  btn.addEventListener('click', function(e){
    if(!e) e = window.event;
    try{
      ul.removeChild(this.parentNode)
    }catch(err){
      alert(err.message)
    }
  })
  li.appendChild(btn)
  ul.appendChild(li);
  input.value = "";
}

然后，当您创建按钮时，您必须将事件侦听器功能附加到它。所以你在createbtn函数中执行ff：

// To create a button 
function createbtn() {
    for (var i = 0; i < list.length; i++) {
      var btn = document.createElement("button");
      btn.appendChild(document.createTextNode("Delete"));
      btn.classList.add("btn", "btn-danger","btn-sm");
      btn.addEventListener('click', function(e){
        if(!e) e = window.event;
        try{
          ul.removeChild(this.parentNode)
        }catch(err){
          alert(err.message)
        }
      })
      list[i].appendChild(btn);
    }
}

无论如何，有更有效的方法来做到这一点。但这是一个快速可行的模型，基于你的小提琴中的代码

Answer 2

而不是查询并将事件添加到按钮对象尝试在文档加载内链接。

window.onload = function () {
    document.querySelector('.btn-danger').addEventListener('click', liDel);
};

以上代码应该有效！

Answer 3

非常感谢大家，在阅读完所有答案后，我得到了一个解决方案：首先，我摆脱了以下几点：

var buttons = document.querySelector (".btn-danger");
var li = document.createElement("li")

然后创建此功能以删除＆＃34; li＆＃34; 使用 ＆＃34;此＆＃34; ，您可以避免错误，因为没有参考，因为您不必关心什么样的这是元素，你现在只有东西存在并抓住你需要的任何东西。

function liDel(){
    ul.removeChild(this.parentNode);
}

并将其放入createBtn中以删除现有的＆＃34; li＆＃34;在html中：

btn.addEventListener('click', liDel);

然后把它放在createElement上，做同样的事情，但对于新的＆＃34; li＆＃34;使用DOM创建：

btn.addEventListener('click', liDel);
li.appendChild(btn);

随之而来的问题就解决了。

再次感谢您，您可以在fiddle

上查看该网页的工作原理

如何在Javascript上解决这个Null属性？

3 个答案: