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 trialBappy Golder
13,449 PointsCode 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:
1 Answer
Marcus Parsons
15,719 PointsHey 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
13,449 PointsBappy Golder
13,449 PointsHey 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
15,719 PointsMarcus Parsons
15,719 PointsWhen 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
13,449 PointsBappy Golder
13,449 PointsThanks for that Marcus. What did you use for syntax highlighting?
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsJust the Treehouse Workspace syntax highlighting =]