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/

@RajaprabhuAravindasamy in a for loop. see here -rule91-https://jsfiddle.net/vbjfbr57/ — Jabba Da Hoot, Mar 08 '16 at 17:56
You have a weird construct inside your addTask function. You already have access to the new li element. Just add the event listeners directly to the li. You dont need the for loop at all. — Prashant, Mar 08 '16 at 18:00
I am new to Javascript. So it's hard for me to put it into context. Could you elaborate on how I could to that? @PrashantPalikhe — Jabba Da Hoot, Mar 08 '16 at 18:02

score 2 · Accepted Answer · answered Mar 08 '16 at 18:11

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

It works! Thanks! I understand now. After build up the HTML you get the delete/editLi and add listeners to them. Instead of looping over all of them withing the function. Thanks! — Jabba Da Hoot, Mar 08 '16 at 18:15
You got it! Great that you are working with vanilla JS only while trying to learn JavaScript. You are on the right path. Good luck — Prashant, Mar 08 '16 at 18:18
Thanks! I was used to jQuery. But I'm getting the hang of it. — Jabba Da Hoot, Mar 08 '16 at 18:24

score 0 · Answer 2 · answered Mar 08 '16 at 18:03

0

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

answered Mar 08 '16 at 18:03

Johannes Jander

4,974
2
31
46

I understand but I would like to exclude Javascript from HTML. Or is this the only way. – Jabba Da Hoot Mar 08 '16 at 18:04
No, there are other ways, but since your HTML is already in the JS (not via a templating lib like moustache), I don't really see the point. – Johannes Jander Mar 08 '16 at 18:06

score 0 · Answer 3 · answered Mar 08 '16 at 18:10

0

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.

answered Mar 08 '16 at 18:10

Gaurav

1

And how would I do that? :) – Jabba Da Hoot Mar 08 '16 at 18:11

Javascript not adding className in if-statement

3 Answers3