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 John Weland
John Weland
42,478 Points

Beyond : Interactive Web Pages with JavaScript

So I finished the 'Interactive Web Pages with JavaScript' where Andrew Chalkley showed us how to build a simple to-do list in vanilla JavaScript. I've gone beyond that with some things he suggested. Namely a user can no longer add a 'blank task', a task in edit mode cannot be added as completed until you save your edits, it allows for AJAX now as well.

I've wanted to turn this into a grocery list. I have a select box with 6 options 'meats, produce, grains, dairy, snacks, misc.' I need to generate a landing area in the form of a ul.class for each option and that ul's class should be named that options value.

After thats done, I need to make a new item get added to the proper ul based on what option was selected. This is all done in vanilla javascript and for the life of me I cannot get it to work properly. I can get a count of the options on the page but its value output is undefined.

Here is a pen of what I have thus far (because I can't share workspaces.) http://codepen.io/johnweland/pen/iyFEo

John Weland
John Weland
42,478 Points

Updated CodePen Sept, 06 2014 @ 11:07AM CST

list item categories now show, next is to append items to the appropriate category.

John Weland
John Weland
42,478 Points

Update CodePen Sept, 06 2014 @ 1:50PM CST

I can now add an item passing along its label 'task' and hidden input with its target category, I still can't seem to get the add function to dynamically add the task to the given category e.g meat goes to the meat list, produce goes to the produce list, etc. right now I can only target a the ul with a hardcoded id '#incomplete-task' where I need to find away to target id(variable + "-list") 'meat-list', 'grain-list'. So close I can feel it! Any help is appreciated.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I'd suggest you create a reduced test case you've got quite a bit of code there to sort through.

John Weland
John Weland
42,478 Points

I can see this being problematic being as it is a large file. I just need to figure out how I can cut code in a mini-version without breaking it.

1 Answer

thomascawthorn
thomascawthorn
22,986 Points
thomascawthorn
thomascawthorn
22,986 Points

I've taken a quick look at your codepen - don't you just need to grab the value of the selected option (which equals the id of the ul element you want to append to?

In your append function you can say something like (notes - I've used $ to show vars):

$element_id = option value;
$display_text = input text;

$append_to_this = get element by id of $element_id
$append_to_this.append li element with $display_text.
John Weland
John Weland
42,478 Points

Hey thanks I'll have to check it out tomorrow. I'm on my phone. I was flying on this code earlier but lost steam in the afternoon. The problem I was having is that I'm creating the ul#id on the fly in a function and the variable for it is in the function and I can't call it from withing the function that is doing the posting.

I'll check out your code in the morning and let you know.

John Weland
John Weland
42,478 Points

No dice, likely because I am not adding something in the right area.

on line 28 I am creating 

var incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete-tasks

which should be (using $ to note a var)

incompleteTaskHolder=document.getElementById($listItem.child($editInput2) + "list";

because my new listItem when created has a hidden input that carries the value of the category this item belongs in. My targets are the ul with the id=category + "-list" (e.g. meats-list).

The problem is listItem is created in a function on lines 31-71 and appended to the target in a second function lines 73-87 . I can't access a child of listItem outside of the function that I created listItem in and I need to capture that and use it outside of the function.

Looking forward. Once I figure this out and can add it to the target, I need to be able to make sure that if I make it as complete it goes to completedTask but if I remove it from completedTask it puts it back into the proper target again. Once thats done I want to make it persistent with some server side code