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 Tom Mitchell
Tom Mitchell
11,552 Points

How to retrieve textContent and display on checkbox input

0 down vote favorite I am trying to build a small program which you enter data into using input fields to build a set of unordered lists containing list items.

I have a checkbox of which that when it is checked, i would like it to display the entire unordered list that contains that bit of text, in this case, atlanta. I would like the rest of the unordered lists which do not contain this text to be set to display: none;

The for loop is the issue, though I have been playing around all day and cannot behave as I would like.

This is the code in question I believe:

I am trying to build a small program which you enter data into using input fields to build a set of unordered lists containing list items.

I have a checkbox of which that when it is checked, i would like it to display the entire unordered list that contains that bit of text, in this case, atlanta. I would like the rest of the unordered lists which do not contain this text to be set to display: none;

The for loop is the issue, though I have been playing around all day and cannot behave as I would like.

Please see the jsFiddle with the link to the code here....

https://jsfiddle.net/tdmitchell/jevro7au/2/

Any help much appreciated.

1 Answer

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,974 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,974 Points

I made a workspace out of your code and made some changes

1) In your createList function added a check to see if input field was type text. The checkbox was being included as an input item which is why there was a list item with text 'on'

2) Modified the checkbox event listener. You declared index j but never used it. And by selecting list items by tag name you iterate through all lists list items instead of for a particular ul.

Is this closer to what you were looking for?

Tom Mitchell
Tom Mitchell
11,552 Points

Hi Kris,

Thanks so much for getting back to me on this. Yes absolutely what I was looking for. You were right on the checkbox, this was a problem I hadn't got to yet.

All functioning great, though just one question... Could you explain why the following......

        let li = liList[1]; //location

Allows the code to run? I see we need to define variable li, though why is it equal to the second item in the liList HTML collection?

Thanks,