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

Posted by MING-HSIEN CHEN
MING-HSIEN CHEN
11,852 Points

After modifying input value, css style disappear

I am a beginner of javascript learner. I'm blocked by this problem for days without any solution, here is my demo:https://jsfiddle.net/subrina/yofyfzm7/

Here is the process:

1.enter some texts in the bar and hit submit button

2.you will get a box where you will see two buttons: edit button and remove button

3.please click edit button to toggle between edit mode and save mode

my problem is, once I modified the input value in the invitee box, the css disappeared, and when I inspected the html file, I notice that <div class="row justify-content-center" id="guestsList"> has be changed to <div class="col-5 item" id="guestsList">

I totally have no clue about what is going on and how to fix it, if anyone can give me some advice that will be great! thanks for your help

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

This seems to be caused by this section of the code:

//check box true and false
list.addEventListener("change", (e) => {
    const checkbox = e.target;
    const checked = checkbox.checked;
    const list = checkbox.parentNode.parentNode;
    if (checked) {
      list.className = "col-5";
      list.className += " item-choose";
    } else {
      list.className = "col-5";
      list.className += " item";
    }
  })

The comment suggests this code is intended for the checkboxes, but the listener is attached to the div with the ID "guestsList" which means any input will trigger it. So when the text box contents are changed, this handler replaces the class of the div with "col-5 item".

I'd guess you really want to restrict this handler to operating only on checkboxes, so you might add a line like this to the beginning of the handler (after "checkbox" is assigned):

  if (checkbox.type != "checkbox") return;
MING-HSIEN CHEN
MING-HSIEN CHEN
11,852 Points

Thank you for the help:)