如何检索textContent并在复选框输入中显示

Question

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:

checkboxInput.addEventListener('change', (e) => {
  const isChecked = e.target.checked;
  let ulList = document.getElementsByTagName('ul');
  let liList = document.getElementsByTagName('li');
  let locationList = document.getElementsByClassName('location');

   if (isChecked) {
    for (let i = 0; i < ulList.length; i += 1) {
      for (let j = 0; j < liList.length; j += 1) {
        let ul = ulList[i];
      let li = liList[i]; 
        if (li.textContent == 'atlanta') {
        ul.style.display = '';
      } else {
        ul.style.display = 'none';
      }
      } 
    }
   }  
});

Please see a jsFiddle link here .

Any help much appreciated.

Answer 1

A couple of the variables I declared were unnecessary in this piece of code. The liList variable was replaced with ulList.children . The second for loop wasn't necessary either. Here is the eventListener changed to achieve the functionality I required.

checkboxInput.addEventListener('change', (e) => {
    const isChecked = e.target.checked;

    let ulList = document.getElementsByTagName('ul');
    if (isChecked) {
        for (let i = 0; i < ulList.length; i += 1) {
            let ul = ulList[i];
            let liList = ul.children;
            let li = liList[1];

            if (li.textContent == 'atlanta') {
                 ul.style.display = 'block';
            } else {
                 ul.style.display = 'none';
            }

        }
    } 
});

Thanks to Kris from Treehouse for the answer to this problem.