Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2018
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb [Help] DOM Events: How to add an item & execute classList.toggle

    Hi everyone,

    For the last week, I have been trying to find the code that would help me fix this issue. I haven't been able to move forward until I actually get the code working. This is the issue:

    What works:
    1. When you click the delete button for each item, it will removed
    2. When you tick the Hide all items all items below will be hidden.

    What doesn't work:
    1. When I enter a value in the add an item box and click the add button the value appears for 1 second and then it disappears?
    2. I can't seem to find a code will execute the classList.toggle.
    (i.e. when clicking the list item, it toggles the .done class on and off)

    See attached screenshot to view my code and would really appreciate it if anyone can have a look and point me in the direction if I am doing something wrong?

    Screenshots:
    https://ibb.co/dWEtS8
    https://ibb.co/fnrwfT

    Thank you in advance.

  2. #2
    New Coder
    Join Date
    Sep 2017
    Location
    South Africa
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It would be helpful to see a working example of this somewhere, although i am guessing it is not online. It would help to see what state that item is still in i was going to to copy it over onto codepen and have a look then i remembered its a image, pm me the sample files, or even just the code displayed in that screenshot. Im sure i could help you out.

  3. #3
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,646
    Thanks
    34
    Thanked 1,034 Times in 1,031 Posts
    It would be 100% better for us and faster for you if you post your code using code tags.

    Just a fast look at your pictures and I'm guess (cause I can't test it) that you should be adding your appendChild to the DIV id iteem-list UL and not the DOM.

    I personally would give that UL an ID to simplify things.
    Last edited by sunfighter; Jun 28th, 2018 at 04:49 PM.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •