Javascript not adding className in if-statement

Question

I am calling a function on a click. The function has an if/else inside that checks the parent's className. On true I remove the class, on false I add a class. But it is only working in the first list item. It isn't setting the class edittable.

What could be the problem?

var editTask = function(elem) {
    if (elem.parentNode.className !== 'edittable') {

        elem.childNodes[0].innerHTML = 'Done';
        elem.parentNode.className = 'edittable';

    } else if (elem.parentNode.className === 'edittable') {

        var setTask = elem.previousSibling.previousSibling.value;
        var taskTarget = elem.previousSibling;

        taskTarget.innerHTML = setTask;
        elem.childNodes[0].innerHTML = 'Edit';
        elem.parentNode.className = '';
    }
}

You can see the live example here: http://www.baasdesign.nl/workspace/taskmanager/

Answer 1

What i meant was to modify your addTask function so it attaches the event listeners to newly created li and related children within it. I quickly modified your code, not sure if it works but it should give you the direction.

var addTask = function (value) {

    // Create new <li>
    var li = document.createElement('li');
    var deleteLi;
    var editLi;

    // Build up HTML
    li.innerHTML = '<input class="checkTask" type="checkbox"/>'; // add checkbox
    li.innerHTML += '<input class="taskInput" type="text" value="' + value + '">'; // add input for edits
    li.innerHTML += '<span class="taskValue">' + value + '</span>'; // add text in span
    li.innerHTML += '<span class="editTask"><small>Edit</small></span><span class="deleteTask"><small>Delete</small></span>'; // edit & delete buttons

    deleteLi = li.querySelector('.deleteTask');
    editLi = li.querySelector('.editTask');

    // Append to uncompleted list
    addToList($uncompletedList, li);

    // Reset task input
    $newTask.value = "";

    // Set uncompletedTask status
    setUncompletedTaskStatus();

    li.querySelector('.checkTask').addEventListener('change', function () {
        taskModifier("check");
    }, false);

    deleteLi.addEventListener('click', function () {
        removeParent(deleteLi);
        setUncompletedTaskStatus();
    }, false);

    editLi.addEventListener('click', function () {
        editTask(editLi);
    }, false);
};

Answer 2

在HTML模板中，您可以从一开始就添加点击处理程序：

 li.innerHTML += '<span class="editTask" onclick="editTask(this)"><small>Edit</small></span><span class="deleteTask"><small>Delete</small></span>'; // edit & delete buttons

Answer 3

The problem you are facing is because you are attaching listeners again and again for all the uncompleted tasks. You need to attach the event listeners only for the task that is being added and not for all the tasks that are there.