Cannot read property 'addEventListener' of null in delete button

Question

I try to write delete button for to do app. When I click on this button, console shows me Uncaught TypeError: Cannot read property addEventListener of null at index.html:40. But var olToDelete is exist! Here's code.

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

and 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();
    })

What to do?

you need to add the event listener when you create the button - also you cannot reuse the ID — mplungjan, Oct 30 '17 at 17:38
Related/possible duplicate [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/q/14028959/218196) — Felix Kling, Oct 30 '17 at 17:40
I copy this to createNewTask function - and it works. But why? — Damian, Oct 30 '17 at 17:44
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — artgb, Oct 30 '17 at 17:56
@Damian: Because the element exists when you bind the event handler. In your original code you are trying to bind the event handler to an element that doesn't exist yet. That's simply not possible. — Felix Kling, Oct 30 '17 at 18:25

score 0 · Answer 1 · answered Oct 30 '17 at 17:54

0

Your DOM does not have the element (delete button) at initially and your try to initialize event for the unknown element. In the javascript code can't find the element which is not initialized while DOM is Ready.

answered Oct 30 '17 at 17:54

Abhilash KK

418
4
15

score 0 · Answer 2 · answered Oct 30 '17 at 17:55

you're running your addTask.addEventListener right away, so OP is correct - when that line executes, the target element doesn't exist yet.

You could wrap that bit in a function declaration and pass it in as a callback in the original function call, so that it executes only after you've created the new element(s)...

score 0 · Answer 3 · answered Oct 30 '17 at 17:56

The id attribute should be unique in the same document that why you should use common classes instead, and you should attach the click event to every new task created like the snippet below demonstrate :

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>

Cannot read property 'addEventListener' of null in delete button

3 Answers3