Skip to main content

JavaScript classList — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the JavaScript classList lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Exercises(5)

  1. 1

    Add a class

    easy10 min

    Add the class active and report the full class list.

  2. 2

    Remove a class

    easy10 min

    Remove the class one and report what is left.

  3. 3

    Toggle a class on

    easy10 min

    Toggle the class open and report whether it is present.

  4. 4

    Check for a class

    easy10 min

    Report whether the element has the class done.

  5. 5

    Add several classes

    medium10 min

    Add three classes at once and report how many the element now has.

Find the bug(5)

  1. 1

    Fix className wiping the other classes

    easy8 min

    Assigning to className replaces every class.

  2. 2

    Fix the dot in the class name

    easy8 min

    classList takes a bare name, without a dot.

  3. 3

    Fix the toggle called twice

    easy8 min

    Toggling twice puts the class back where it started.

  4. 4

    Fix contains used to add

    easy8 min

    contains only checks; it does not change anything.

  5. 5

    Fix the wrong class removed

    easy8 min

    The class that should stay is being taken off.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace