Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Owa Aquino
Owa Aquino
19,277 Points

JavaScript : How to change Class of an Element upon toggle

Hi Treehouse Students!

How do we change class of an element and text using JavaScript. I have here a the code but it's not working. My goal is when i click the Edit button of an Item the buttons should update it's class and text. But this code seems not working.

// 2. When edit button is clicked from the To DOs list ul
//  a. disable task checkbox
//  b. change buttons
        // b.a edit button becomes save button
        // b.b delete button becomes cancel button
//  c. label becomes input with it's previous value as placeholder/value

var editModeButtons = function(editModeClass){
    var listItem = this.parentNode;

    var saveBtn = listItem.querySelector("button.edit");
    var cancelBtn = listItem.querySelector("button.delete");

    saveBtn.textContent = "Save"; //add label into the button 
    saveBtn.className = "save"; //add class to the button

    cancelBtn.textContent = "Cancel"; //add label into the button 
    cancelBtn.className = "cancel"; //add class to the button   

    listItem.appendChild(saveBtn);
    listItem.appendChild(cancelBtn);

    listItem.classList(editModeClass);
}

var editItem = function(){
    var listItem = this.parentNode;

    var label = listItem.querySelector("label");
    var inputText = listItem.querySelector("input[type=text]"); 
    var saveBtn = listItem.querySelector("button.edit");
    var cancelBtn = listItem.querySelector("button.delete");

    var containsClass = listItem.classList.contains("edit");

    if (containsClass) {
        label.innerHTML = inputText.value;

        saveBtn.textContent = "Save"; //add label into the button 
        saveBtn.className = "save"; //add class to the button

        cancelBtn.textContent = "Cancel"; //add label into the button 
        cancelBtn.className = "cancel"; //add class to the button   

    }else {
        inputText.value = label.innerHTML;
    }

    listItem.classList.toggle("editMode");
}

I would really appreciate your help.

here are the snapshot of the whole project. http://w.trhou.se/vnt4yqzavd

Thanks again!

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

:point_right: It looks like you are checking for the wrong class.

Where you have this line:

    var containsClass = listItem.classList.contains("edit");

You probably want "editMode" instead of "edit. And when it's true, you probably want to restore the original button legends. Move the code that changes the legends to "Save" and "Cancel" to the else block.

And you probably don't want to replace the classes on the buttons, since the classes are used to recognize the buttons (for example: "var saveBtn = listItem.querySelector("button.edit");"). If you change the class from "edit" to "save", it will not be recognized again and will stop working.

Owa Aquino
Owa Aquino
19,277 Points

Wow! It's working now. I think you'll be a great JavaScript teacher.

Here's my code now:

var editItem = function(){
    var listItem = this.parentNode;

    var label = listItem.querySelector("label");
    var inputText = listItem.querySelector("input[type=text]"); 
    var saveBtn = listItem.querySelector("button.edit");
    var cancelBtn = listItem.querySelector("button.delete");

    var containsClass = listItem.classList.contains("editMode");

    if (containsClass) {
        label.innerHTML = inputText.value;
    }else {
        inputText.value = label.innerHTML;
    }

    listItem.classList.toggle("editMode");

    var containsEditMode = listItem.classList.contains("editMode");

    if(containsEditMode){       
        saveBtn.textContent = "Save"; //add label into the button 
        cancelBtn.textContent = "Cancel"; //add label into the button 
    }
}

You've said that I should not change the class but I did anyway and I saw the result, now my plan is to entirely change the class names for edit and delete. I'm so psyched!

Thank you so much! Really appreciate your help Steven!