Javascript 无法读取属性'；增补列表器'；删除按钮中的空值

我尝试为待办事项应用程序编写删除按钮。当我单击此按钮时，控制台显示未捕获的TypeError:无法读取索引处null的属性

addEventListener

。html:40。但是var olToDelete是存在的！这是代码

<input type="text" id="text-field">
<input type="button" id="add-task" value="dodaj zadanie!">

<div id="to-do-list-container">
    <ul id="task-list">
        <ol>damian</ol>
    </ul>
</div>

达米安

和JS

let textField = document.getElementById('text-field'),
        addTask = document.getElementById('add-task'),
        taskValue,
        taskList = document.getElementById('task-list');



    function createNewTask(){
        var ol = document.createElement('ol'); //creating element ol
        taskValue = textField.value; //getting value from user
        taskList.appendChild(ol); //add ol to ul
        ol.id = 'single-task';
        ol.innerHTML = taskValue; //add value from user to new ol
        ol.innerHTML += '<input type="button" value="ZROBIONE!" id="delete-button">';
    }

    addTask.addEventListener('click', function() {
        createNewTask(); 
    })

    var olToDelete = document.getElementById('delete-button');
    //DELETING TASK
    olToDelete.addEventListener('click', function(){
        var ol = document.getElementById('single-task');
        ol.remove();
    })

let textField=document.getElementById（'text-field'），
addTask=document.getElementById（'add-task'），
taskValue，
taskList=document.getElementById（'task-list'）；
函数createNewTask（）{
var ol=document.createElement（'ol'）；//创建元素ol
taskValue=textField.value；//从用户获取值
taskList.appendChild（ol）；//将ol添加到ul
ol.id='单个任务'；
ol.innerHTML=taskValue；//将值从用户添加到新的ol
ol.innerHTML+=''；
}
addTask.addEventListener（'单击'，函数（））{
createNewTask（）；
})
var olToDelete=document.getElementById（'delete-button'）；
//删除任务
olToDelete.addEventListener（'click'，function（）{
var ol=document.getElementById（'single-task'）；
ol.remove（）；
})

---

怎么办？

您的DOM最初没有该元素（删除按钮），您尝试初始化未知元素的事件。

---

在javascript代码中，找不到DOM准备就绪时未初始化的元素。

您的DOM最初没有该元素（删除按钮），您尝试初始化未知元素的事件。

---

在javascript代码中，找不到DOM就绪时未初始化的元素。

您正在立即运行addTask.addEventListener，因此OP是正确的-当该行执行时，目标元素还不存在

---

您可以将该位封装在函数声明中，并在原始函数调用中将其作为回调传递，以便它仅在创建新元素后执行。

您正在立即运行addTask.addEventListener，因此OP是正确的-当该行执行时，目标元素还不存在

---

您可以将该位封装在函数声明中，并在原始函数调用中将其作为回调传递，以便它仅在创建新元素后执行。

在同一文档中，

id

属性应该是唯一的，这就是为什么您应该改为使用公共类，您应该将click事件附加到创建的每个新任务，如下面的代码段所示：

let textField=document.getElementById（'text-field'），
addTask=document.getElementById（'add-task'），
taskValue，
taskList=document.getElementById（'task-list'）；
函数createNewTask（）{
var ol=document.createElement（'ol'）；//创建元素ol
taskValue=textField.value；//从用户获取值
taskList.appendChild（ol）；//将ol添加到ul
ol.class='单个任务'；
ol.innerHTML=taskValue；//将值从用户添加到新的ol
ol.innerHTML+=''；
//将事件附加到每个新任务
ol.querySelector（“.delete按钮”）.addEventListener（'click'，remove）；
}
addTask.addEventListener（'单击'，函数（））{
createNewTask（）；
})
//删除所有任务的函数
函数删除（）{
this.parentNode.remove（）；
}

达米安

在同一文档中，

id

属性应该是唯一的，这就是为什么您应该使用公共类，并且您应该将单击事件附加到创建的每个新任务，如下面的代码片段所示：

let textField=document.getElementById（'text-field'），
addTask=document.getElementById（'add-task'），
taskValue，
taskList=document.getElementById（'task-list'）；
函数createNewTask（）{
var ol=document.createElement（'ol'）；//创建元素ol
taskValue=textField.value；//从用户获取值
taskList.appendChild（ol）；//将ol添加到ul
ol.class='单个任务'；
ol.innerHTML=taskValue；//将值从用户添加到新的ol
ol.innerHTML+=''；
//将事件附加到每个新任务
ol.querySelector（“.delete按钮”）.addEventListener（'click'，remove）；
}
addTask.addEventListener（'单击'，函数（））{
createNewTask（）；
})
//删除所有任务的函数
函数删除（）{
this.parentNode.remove（）；
}

达米安

创建按钮时，您需要添加事件侦听器-而且您不能重复使用IDRelated/mably duplicate I copy this to createNewTask函数-并且它可以工作。但是为什么？可能是@Damian:的重复，因为绑定事件处理程序时元素存在。在原始代码中，您试图将事件处理程序绑定到一个尚不存在的元素。这是不可能的。创建按钮时需要添加事件侦听器-而且不能重用IDRelated/mably duplicate I copy this to createNewTask函数-它可以工作。但是为什么？可能是@Damian:的重复，因为绑定事件处理程序时元素存在。在原始代码中，您试图将事件处理程序绑定到一个尚不存在的元素。这根本不可能。