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 DOM Scripting By Example Adding and Removing Names RSVP Checkbox

Clicking within the label container holding the input tag checks and unchecks the checkbox...?

Not sure if anyone else noticed this, but I noticed that clicking within the label tag container, which contains the input checkbox element, checks and unchecks the checkbox...In other words, I do not have to click on the checkbox in order to check or uncheck the checkbox. I can click elsewhere and it will work...

How do you make it so that ONLY clicking on the checkbox will check and uncheck the checkbox? Would you have to create an event handler within submit handler for every time a checkbox is created??

Any ideas Steven Parker ? You've been very helpful through this course. Thought I'd reach out to you for help.

2 Answers

OK I think I figured it out Steven Parker . I tried creating a <p> element by changing this line of code:

const label = document.createElement('label')

Although the styling changed on the "Confirmed" text, I am now able to ONLY check the checkbox if I click on the checkbox and no where else. I guess the "label" element also acts as a trigger as well? Hm, interesting.

Thanks for your insight and help! I probably would not have investigated further if you had not responded to my question haha.

Steven Parker Your response helped me investigate further to resolve the issue. However, I thought the best solution was to change the <label> tag to a <p> tag, and the respective "label" selectors to "p" selectors in CSS because it required the least amount of changes while maintaining the same HTML layout and expected functionality of the app.

I tried your suggestion of making <checkboxInput> a sibling of <label> and it worked. However, making that change resulted in the checkbox shifting below "Confirmed", and when the checkbox was checked, the text "Confirmed", shown on all of the list items were highlighted blue, not the particular list item container the checkbox was wrapped in.

With that in mind, I did not choose the "best answer" to be the answer I provided simply because it was my answer and it worked. I chose it because I thought the "best answer", or the easiest fix to resolve the issue, was to change the <label> tag to a <p> tag, and the respective "label" selectors to "p" selectors in CSS.

Steven Parker
Steven Parker
229,968 Points

Since you provided only JavaScript code, I had to construct some HTML to go with it for testing. The effects you mention did not appear in my testing. If you had provided the actual complete code I could have given you more accurate suggestions that would not have had the side-effects you mention.

Changing the tag type might work in this case; but it alters the intention of the code, and could potentially have even more significant side effects. I would not recommend it as a general practice to resolve similar issues in real-world situations.

Steven Parker
Steven Parker
229,968 Points

:bell: Hi, I was alerted by your tag.

You can cause a a label to act as another trigger for the checkbox by using the "for" attribute of the label. But if you omit that attribute in the label, the checkbox should only respond to direct clicks.

A label will also act as a trigger for a checkbox if the checkbox is inside the label.

my label elements do not contain a "for" attribute. Yet by clicking within the label container, it is still able to act as a trigger to check and uncheck boxes. Here is the following code snippet of creating a list element and the change delegating handler. The code is essentially the same as what Guil coded prior to refactoring. Does this help?

// create list element

function createLi(invitee) {
const li = document.createElement('li');

const span = document.createElement('span');
span.textContent = invitee; // replaced li.textContent with span to convert text element to HTML element
li.appendChild(span);

const label = document.createElement('label');
label.textContent = 'Confirmed';
li.appendChild(label);

const checkboxInput = document.createElement('input');
checkboxInput.type = 'checkbox';  label.appendChild(checkboxInput);

const editButton = document.createElement('button');
editButton.textContent = 'edit'
li.appendChild(editButton);

const removeButton = document.createElement('button');
removeButton.textContent = "remove";
li.appendChild(removeButton);

return li;

}

// change event for checkbox

ul.addEventListener("change", (e) => {
const checkboxInput = e.target; 
const checked = checkboxInput.checked; // returns a boolean
const li = checkboxInput.parentNode.parentNode; // DOM traversal to <label> then to <li>
if (checked) {
  li.className = "responded";
} else {
  li.className = '';
}

})

Steven Parker
Steven Parker
229,968 Points
//label.appendChild(checkboxInput);  -> instead of putting the checkbox inside the label...
  li.appendChild(checkboxInput);     // make it a sibling of the label