삭제 버튼에 null의 'addEventListener'속성을 읽을 수 없습니다.

Question

앱을 삭제하기위한 버튼을 쓰려고합니다. 이 버튼을 클릭하면 콘솔에 Uncaught TypeError가 표시됩니다. index.html : 40에서 속성 addEventListener을 읽을 수 없습니다. 하지만 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(); 
    }) 

무엇을 할까?

Answer 1

DOM에는 처음에는 요소 (삭제 버튼)가없고 알 수없는 요소에 대한 이벤트를 초기화하려고합니다. DOM이 준비되어있는 동안 javascript 코드에서 초기화되지 않은 요소를 찾을 수 없습니다.

Answer 2

addTask.addEventListener를 바로 실행하고 있으므로 OP가 정확합니다. 해당 행이 실행될 때 대상 요소가 아직 존재하지 않습니다. 당신이 새 요소 (들)을 생성 한 후에 만 ​​실행되도록

당신은 ..., 함수 선언에서 그 비트를 포장하고 원래의 함수 호출에서 콜백로에 전달할 수

Answer 3

id 속성 대신 일반 클래스를 사용해야하는 이유 것과 같은 문서에서 고유해야하며, 아래의 코드 조각처럼 만든 모든 새 작업에 클릭 이벤트를 첨부해야한다는 보여줍니다

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.class = 'single-task'; 
 
    ol.innerHTML = taskValue; //add value from user to new ol 
 
    ol.innerHTML += '<input type="button" value="ZROBIONE!" class="delete-button">'; 
 

 
    //Attach event to every new task 
 
    ol.querySelector('.delete-button').addEventListener('click', remove); 
 
} 
 

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

 
//Remove function for all the tasks 
 
function remove() { 
 
    this.parentNode.remove(); 
 
}

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