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 One Solution

Ken Okiebisu
Ken Okiebisu
9,673 Points

Changing text fields to checkboxes

I have question on why this is wrong. I used query selector to select all the elements which is different from the solution in the video. The video used the getElementsByTagName and looped it.

// 6: Change all <input> elements from text fields to checkboxes const allInputElements = document.querySelectorAll('input'); allInputElements.type = 'checkbox';

4 Answers

Steven Parker
Steven Parker
231,248 Points

With appropriate arguments, "querySelectorAll" should be an effective substitute for "getElementsByTagName".

But either way, you can't assign the "type" attribute of all the elements of a collection with a single operation. You'd need to loop through the collection and assign them individually.

Harald N
Harald N
15,843 Points

my solution to looping over the input's with the querySelectorAll is this:

let allInputElements = document.querySelectorAll('input');
for (let i = 0; i<allInputElements.length; i++) {
  allInputElements[i].type = 'checkbox';
}

This is the same as in the video, the only difference is that you made a list with the input elements with the query selector instead of getElementsByTagName.

Hope this helps.

Ken Okiebisu
Ken Okiebisu
9,673 Points

Thanks for the reply. I see. So then if I can loop through the elements using the querySelectorAll somehow then would it be a sufficient way to change the type attributes?

Steven Parker
Steven Parker
231,248 Points

Both "querySelectorAll"and "getElementsByTagName" give you an iterable collection that you can use in a loop.

Ken Okiebisu
Ken Okiebisu
9,673 Points

I see. I will trying searching for a way to use querySelectorAll to iterate over the elements. Thanks for the answers.

Steven Parker
Steven Parker
231,248 Points

Besides using it in a loop, you can also apply the "forEach" method to it.

Ken Okiebisu — If your original question has been answered, you can mark it solved by choosing a "best answer".
And happy coding!