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: Modifying Elements

Posted by Floyd Orr
Floyd Orr
11,723 Points

What 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
Damien Watson
27,419 Points

Hi 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";
Marcus Parsons
Marcus Parsons
15,719 Points

Great example of a fantastic answer! :)

Daniel Mejia
Daniel Mejia
12,481 Points

Thanks Damien! I can see it clearly now.

Gabriel Kunkel
Gabriel Kunkel
2,566 Points
Gabriel Kunkel
Gabriel Kunkel
2,566 Points

I 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.

Oliver Klein
Oliver Klein
10,985 Points
Oliver Klein
Oliver Klein
10,985 Points

This 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
Floyd Orr
11,723 Points
Floyd Orr
Floyd Orr
11,723 Points

Thanks that was very clear

Damien Watson
Damien Watson
27,419 Points

Awesome, glad to help.