CODEWITHSUNDEEP
javascriptif-statement
Jabba Da Hoot
Jabba Da Hoot

Reputation: 804

Javascript not adding className in if-statement

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/

Upvotes: 1

Views: 100

Answers (3)

Prashant
Prashant

Reputation: 8050

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

Upvotes: 2

Gaurav
Gaurav

Reputation: 1

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.

Upvotes: 0

Johannes Jander
Johannes Jander

Reputation: 5020

In your HTML template, you could add the click-handler from the get go:

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

Upvotes: 0

Related Questions