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 Interacting with the DOM Traversing the DOM Getting All Children of a Node with children

Posted by Victor Reynaga
Victor Reynaga
5,054 Points

Creating an element in the global scope

I created a checkbox element outside of the event listener, on the global scope, then i set a button to add what was written in the textbar to append to the <ul> list as a <li> element... i then also appended the checkbox element to the <li> element so every <li> created would have a checkbox.. but it only gave a checkbox to the newsest <li> element that was added.

(let checkbox = document.createElement('input'));

buttonAlert.addEventListener('click', () => { let liItem = document.createElement('li') checkbox.type = 'checkbox'; liItem.textContent = textBar.value; list.append(liItem) liItem.append(checkbox) input.value = ''; checkbox.className = 'checkbox' })

i then created the checkbox element inside scope of the event listener and it now gives ever single <li> a checkbox apposed to just the newest item when created on the global scope. Why is that? can someone explain? thanks.

buttonAlert.addEventListener('click', () => { let liItem = document.createElement('li') let checkbox = document.createElement('input') checkbox.type = 'checkbox'; liItem.textContent = textBar.value; list.append(liItem) liItem.append(checkbox) input.value = ''; checkbox.className = 'checkbox' })

Stephen Cole
Stephen Cole
Courses Plus Student 15,809 Points
Stephen Cole
Stephen Cole
Courses Plus Student 15,809 Points

I'm trying to figure out your question. (Over a year after you asked it.)

It would help if you used the the markdown feature for your code.

let checkbox = document.createElement('input');

buttonAlert.addEventListener('click', () => { 
  let liItem = document.createElement('li');
  checkbox.type = 'checkbox'; 
  liItem.textContent = textBar.value; 
  list.append(liItem); 
  liItem.append(checkbox);
  input.value = ''; 
  checkbox.className = 'checkbox' 
});

buttonAlert.addEventListener('click', () => { 
  let liItem = document.createElement('li'); 
  let checkbox = document.createElement('input');
  checkbox.type = 'checkbox'; 
  liItem.textContent = textBar.value; 
  list.append(liItem);
  liItem.append(checkbox);
  input.value = ''; 
  checkbox.className = 'checkbox';
});

I'm not sure where textBar comes from. Was this part of an earlier version of this lecture?

Also, where does list.append(liItem); come from?

The functions you have listed seem good. I'd like to look at the rest of your JS. If everything is being updated, there might a clue somewhere else.

I'd look for a live Node/HTML list that is getting updated or some CSS property that is being changed that impacts each list element.