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 trialFloyd Orr
11,723 PointsWhat was the point of this part of the code? I'm not sure what was going on.
checkBox.type ="checkbox";
editInput.type ="text";
editButton.innerText ="edit";
editButton.className ="edit ?????Why did me need this how do I know when to use it?
4 Answers
Damien Watson
27,419 PointsHi Floyd, this part of the code is helping to define the elements created above, he separated them for easy reading. If you reorder it, it may make more sense for you, something like:
// Create an input and then set type to 'checkbox' == <input type="checkbox">
var checkBox = document.createElement("input");
checkBox.type ="checkbox";
// Create an input and set type to 'text' == <input type="text">
var editInput = document.createElement("input");
editInput.type ="text";
// Create button and set as 'edit' button style == <button class="edit">edit</button>
var editButton = document.createElement("button");
editButton.innerText ="edit";
editButton.className ="edit";
Gabriel Kunkel
2,566 PointsI think what was confusing about this video was that he didn't fully explain how he needed to build up these elements. It's more tedious in JavaScript than HTML. In HTML it's straightforward, but with JavaScript you may have to build up all the parts and aspects of an element separately: the text, the type, the class, etc. That's the price of interactivity.
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 PointsWhoosh....This video confused me too. At least I know that I'm not the only one:-)
Oliver Klein
10,985 PointsThis code was setting the attributes values and inner text values of the buttons and inputs in the to-do list application. For instance "checkBox.type ="checkbox";" simply sets the type of input of the checkBox variable to "checkbox". Similar with all the other cases! Hope this helps!
Floyd Orr
11,723 PointsThanks that was very clear
Damien Watson
27,419 PointsAwesome, glad to help.
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsGreat example of a fantastic answer! :)
Daniel Mejia
12,481 PointsDaniel Mejia
12,481 PointsThanks Damien! I can see it clearly now.
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 PointsJuliette Tworsey
Front End Web Development Techdegree Graduate 32,425 PointsThat helps. Thanks!