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
Saira Bottemuller
Courses Plus Student 1,749 PointsQuick Question: JS - my blanks are stacked?!
This question is regarding Andrew Chalkley's Interactive Web Pages with JavaScript Stage 3: Traversing and Manipulating DOM with JavaScript.
Hello everyone! Just a quick question here - I got everything to work the way that Andrew did in this challenge, however when he showed how the page works so far (unfinished), mine didn't work so I debugged it, found where I'd gone wrong (SYNTAX ERROR wow, who'da thunk it?! lol) and now the page works properly EXCEPT------- Andrew's page shows two blank boxes (as if for input, although they're not yet specified to a task within our program, we haven't gotten there yet) and his two blank boxes are side by side.
On my program, they show up as being stacked on top of each other. I'm not sure where in my code I need to start experimenting to fix this (was going to try \n or maybe < br / > ???), or if it's something I've mistyped again - I figured a syntax error would break the functionality so I don't think it's that, but I'm just not sure why his boxes show up side by side and I've done something to cause mine to be stacked one on top of the other with no space between, almost like two rows of an Excel table. My concern is that 1) mine should probably be just like his if I've followed the same steps, and 2) this may affect functionality/layout in the near future when I'm trying to finish the program. Also, I'm using Chrome Canary if that helps/affects things at all. Any ideas?
Here (if I've attached it properly?! It's my first try at snapshotting Workspace) is a snapshot of my workspace. The file in question is app.js . Thanks for taking the time to help a girl out!
Saira's Workspace: look in app.js to see the code in question:
6 Answers
Nicholas Woods
6,260 PointsI get the same thing in chrome on Windows 8.1, but not in firefox. Andrew is using a mac and chrome. But there is no problem here, just an incomplete program running. The form doesn't know what to do with these elements yet and the css has not been applied because they're not fully defined in HTML. You haven't done anything wrong. When you click add it's just appending these empty elements: li, input, label, input, button, button.
var createNewTaskElement = function(taskString) {
//create list item
var listItem = document.createElement('li');
//input checkbox
var checkBox = document.createElement('input'); //checkbox
//label
var label = document.createElement('label');
//input (text)
var editInput = document.createElement('input'); //text
//button.edit
var editButton = document.createElement('button');
//button.delete
var deleteButton = document.createElement('button');
//each element needs modifying
//each element needs appending
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;
}
If you look at this snippet from the HTML below you can see the input has the type of 'checkbox' and 'text' - we have yet to define these, among other things. If you haven't taken the course on HTML forms I would suggest it, as it is what has helped a lot here.
<li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
Marcus Parsons
15,719 PointsHey again Saira,
The problem with your code is that you haven't yet initialized the new task elements properly. When you add the code from the next video, it will correct what you're seeing. It looks like Andrew is using Safari, and you're probably using Chrome or Firefox. I, too, see the boxes as stacked, but it doesn't matter because this will be remedied in the next video.
Those two inputs are actually a checkbox and a text box, although they are automatically appended to the page as text boxes if no type value is specified. Once you do the next video's code, you'll remedy this, so don't add anything else unnecessary to your code!
Saira Bottemuller
Courses Plus Student 1,749 PointsWow awesome, thank you guys so much for your help! I appreciate the useful insight - it's nice to see that it's not something I broke lol :D It did end up working out okay in the end, I moved along and ended up finishing the program and it works! I do have to note though that when Andrew edits his existing tasks, they go back into "regular" mode when he clicks "Edit" again (so, toggling editMode) but mine never do, I can click on them at any point after having edited them and they still are changeable, they never re-solidify I guess you could say. It wasn't a huge deal but it did make me curious. What do you guys think about that? Does your editMode toggle on/off properly? In some of the challenges (the 5 Question Quiz, StarTrek woo! Marcus had fun with that one :D ) I alter the code they give me to see if I can make it cooler, or learn more by screwing it up and then fixing it lol...but in this one, I was in completely unfamiliar territory so I think I copied his code to the letter. Think this is maybe another browser issue? Here's the snapshot of the finished code ----well mostly finished, I'm into the "perfecting" segment where he gets more in-depth with some new things, but the basic functionality is (should be) complete. Can you see anything in my code that might be causing editMode not to toggle back off?
Marcus Parsons
15,719 PointsThat snapshot is a link to your old program, Saira! :D
Saira Bottemuller
Courses Plus Student 1,749 PointsThese are both great answers, I don't know which one to mark as Best! D:
hmmm it should be a new snapshot of the same workspace, updated?! WELL crud. :(
Marcus Parsons
15,719 PointsGive it to Nicholas! He added more stuff than I did :P haha
Nicholas Woods
6,260 PointsThanks Marcus, you're very active on the forum and have helped me out a lot, so I appreciate it.
Saira, when you visit the snapshot is it the completed version or incomplete? Maybe just take another one and check it. Here is my completed program with a few added extras for functionality (Cannot add empty tasks and edit/save button change) - if you haven't done this, I suggest trying by yourself first.
Also, like many it seems, I struggled a little through this particular course by Andrew. However, I kept working on this program until I understood it, playing around with it until I fixed anything broken and then adding some extra functionality to it. This helped me the most. By looking at the code and trying to run your mind through it; asking what is happening here; what is this function doing and when is it running, from where and to where etc... If I can picture what's happening with my eyes closed it has usually stuck, I find this visualization helps tremendously (may or may not fit your style). Learning is difficult and frustrating at times, but so worth it.
Marcus Parsons
15,719 PointsIt's my pleasure, Nic!
Saira Bottemuller
Courses Plus Student 1,749 PointsThat's a great technique Nicholas I may go ahead and start using it! I will check into my To Do List program.
Marcus Parsons
15,719 PointsI created a persistent to-do list program that saves all of your tasks after you've closed the page/browser. I did the styling different, you can press enter to add a task or press enter when editing a task to save it, and a few other things. http://www.marcusparsons.com/projects/todolist/index.html
Marcus Parsons
15,719 PointsBtw, Saira, can you please email me back about what we were discussing? Thanks.
Nicholas Woods
6,260 PointsThis looks like a good project to try and tackle eventually Marcus, though I wouldn't know how to handle the server side stuff yet.
Marcus Parsons
15,719 PointsI used no server side code. I just took advantage of JavaScript's localStorage and its compatibility with all modern browsers. :P Take a look at the source code.
Saira Bottemuller
Courses Plus Student 1,749 PointsYup I just did :)