CODEWITHSUNDEEP
javascripthtml
Michael Pascuzzi
Michael Pascuzzi

Reputation: 151

Why is eventListener not being added?

I have code here in a todo list that can add and delete tasks. I'm trying to implement code to edit tasks after they are added by double clicking. Right now the code should just log to the console after double clicking the LI element but it's not doing anything.

newTodoInput.addEventListener('keyup', function addTodoController(event){
    if ( event.keyCode === 13){
        if ( newTodoInput.value !== '' ){
            var newTask = todos.addTaskToList(newTodoInput.value.trim(), todos.taskList);
            var clone = templateContent.cloneNode(true);
            clone.querySelector("label").appendChild(document.createTextNode(newTodoInput.value.trim()));
            todoList.appendChild(clone);
            newTodoInput.value = '';
            deletingTasks();
            editingTasks();
        }
    }
}); // END addEventListener(addTodoController)
function deletingTasks() {
    var deleteTaskButtons = document.querySelectorAll('button.destroy');
    _.last(deleteTaskButtons).addEventListener('click', function removeLi(){
        //console.log(event.target.parentNode.parentNode.parentNode);
        event.target.parentNode.parentNode.parentNode.removeChild(event.target.parentNode.parentNode);
        todos.deleteTask(_.indexOf(deleteTaskButtons, event.target), todos.taskList);
    });
}

function editingTasks(){
    var editTask = document.querySelectorAll('li');
    _.last(editTask).addEventListener('dblclick', function taskEdit(){
        console.log("Edit this task!");
    });
}

I'm invoking the editingTasks function every time a task is added just like I did with the deleting tasks function so that the event listeners will be added to each li element as it's added but I'm not getting anything. Any pointers to why this code doesn't work? Here's the HTML if needed:

<ul class="todo-list">
                <!-- These are here just to show the structure of the list items -->
                <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
                <template id='newtasktemplate'>
                    <li>
                        <div class="view">
                            <input class="toggle" type="checkbox">
                            <label class="tasking"></label>
                            <button class="destroy"></button>
                        </div>
                        <input class="edit" value="Rule the web">
                    </li>
                </template>
            </ul>

Upvotes: 1

Views: 3890

Answers (1)

jfriend00
jfriend00

Reputation: 707218

It seems likely that your code that does:

var editTask = document.querySelectorAll('li');
_.last(deleteTaskButtons).addEventListener(...)

may not be selecting the right <li> tag. My suggestion is to change your template to add a unique class name to the <li> tag as in:

<li class="myListItem">

And, then change your code to this:

var editTask = document.querySelectorAll('.myListItem');
_.last(deleteTaskButtons).addEventListener(...)

Upvotes: 1

Related Questions