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 Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Changing Classes

Posted by Bappy Golder
Bappy Golder
13,449 Points

Code not quite working.

Looks like my code is not quite working. I obviously have got something wrong but not sure what it is. Can any of you see what's the issue? here's a snapshot of my workspace:

http://w.trhou.se/0l9z6fdaxs

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Bappy,

I found just a couple issues with your code. In your editTsk function (even though it is a misspelling, it is properly referenced in bindTaskEvents function) you need quotes around the word label inside of the query selector. 

var editTsk = function(){
  console.log("editTask function triggerd . . .")

  var listItem = this.parentNode;

  var editInput = listItem.querySelector("input[type=text]");
  //added quotes to label 
  var label = listItem.querySelector('label');
  var containsClass = listItem.classList.contains("editMode");

  //if the class of the praenet is .editmode
  if(containsClass){
    //switch from edit mode
    //label text becomes input value
    label.innerText = editInput.value;
   }else{
    //switch to .editmode
    //input value becomes labe's text
    editInput.value = label.innerText;
   }

  //toggle .editmode on the parents
  listItem.classList.toggle("editMode");
}

And you didn't have a click event on your add button, so you have to add that. I put this click event right after the last function bindTaskEvents but you can put it just about anywhere (as long as it comes after the function addTask):

addButton.onclick = addTask;

After making those modifications, your code works fine! :)

Bappy Golder
Bappy Golder
13,449 Points

Hey Marcus that's awesome thanks for the help. How did you go about tracing the problems? It would be helpful to know for the future.

Cheers for the help too :)

Marcus Parsons
Marcus Parsons
15,719 Points

When I forked your workspace, I just started using the app and noticed that the add button didn't do anything and when I tried to edit items, it wouldn't work. I looked in the console and I was getting an error. I started at the edit task function and just carefully combed through it. Syntax highlighting really helps because I noticed that the other two query selectors had the color of strings but the label didn't. That's when I changed the label and re-ran the app. I made sure that it switched in between the edit input and the label.

Then, the add button was easy because I know that, by default, buttons have no functionality to them, and I checked the console and there were no errors. So, that can only mean the event handler is completely missing. So, I just had to add that and voila! Your code is working again.

And you're very welcome, Bappy. I always love to help out, man. Cheers to you, as well, and happy coding!

Bappy Golder
Bappy Golder
13,449 Points

Thanks for that Marcus. What did you use for syntax highlighting?

Marcus Parsons
Marcus Parsons
15,719 Points

Just the Treehouse Workspace syntax highlighting =]