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
Ian Hart
Full Stack JavaScript Techdegree Graduate 40,962 PointsNeed help understanding listItem
I am just trying to figure out what the variable listItem consists of. Does it refer to the label or the whole <li> created with JS.
const form = document.getElementById('registrar');
const input = form.querySelector('input');
const ul = document.getElementById('invitedList')
form.addEventListener('submit', (event) => {
```const text = input.value;```
```input.value = "";```
```const li = document.createElement('li');```
```li.textContent = text;```
```const label = document.createElement('label');```
```label.textContent = 'Confirmed';```
const checkbox = document.createElement('input');```
```checkbox.type = 'checkbox';```
```label.appendChild(checkbox);```
```li.appendChild(label);```
```ul.appendChild(li); });```
```ul.addEventListener('change', (event) => {```
```const checkbox = event.target;```
```const checked = checkbox.checked;```
```const listItem = checkbox.parentNode.parentNode;```
```if( checked ) {```
```listItem.className = 'responded';```
```} else {```
listItem.className = '';```
``` }```
```});```
2 Answers
Brandon Tucker
1,915 PointsThe checkbox is a child of the label node (checkbox.parentNode) and the label node is a child of the li node (checkbox.parentNode.parentNode) as it is a input element created inside those two.
li>label>input
Hope this helps Edit: Clarification
or in this case since you are starting at the input node. input>label>li
Brandon Tucker
1,915 Points3 graves (` or backticks) at the beginning followed by the type of code then start your code on a new line followed up by 3 more graves a the end.
Have fun Ian!
Ian Hart
Full Stack JavaScript Techdegree Graduate 40,962 PointsIan Hart
Full Stack JavaScript Techdegree Graduate 40,962 PointsThanks Brandon, that was explained very well I understand now, sorry for the horrendous code, still learning how to transfer it over nicely to the forum! Thank you! Brandon Tucker