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

Tayyeba Shoaib
Tayyeba Shoaib
7,797 Points

li does not change appearance.

My code adds the "responded" class to the li, but it does not change the appearance of the li. What could be wrong?

const form = document.getElementById("registrar");
const input = form.querySelector("input");
const ul = document.getElementById("invitedList");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  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", (e) => {
  const checkbox = e.target;
  const checked = checkbox.checked;
  const listItem = checkbox.parentNode.parentNode;

  if (checked) {
    listItem.className = "responed";
  } else {
    listItem.className = "";
  }
})

2 Answers

Tommy Gebru
Tommy Gebru
30,164 Points

Typo when setting className to "responded"

Guil made sure that the class name is a css class to style the li elements

Sam Donald
Sam Donald
36,305 Points

Try taking a look at your CSS file. It's probably a specificity issues.