Skip to main content

How to Add JavaScript — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the How to Add JavaScript 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

    Run code against the page

    easy10 min

    Find #out and set its text to "connected".

  2. 2

    Find an element by tag

    easy10 min

    Read the heading text and show it.

  3. 3

    Count the elements

    easy10 min

    Count how many paragraphs exist on the page.

  4. 4

    Add a class from script

    easy10 min

    Add the class "active" to #out then report "classed".

  5. 5

    Check the document is ready

    medium10 min

    Confirm the body exists and report "loaded".

Find the bug(5)

  1. 1

    Fix the missing hash

    easy8 min

    The selector omits the # so it looks for a tag named out.

  2. 2

    Fix the wrong document property

    easy8 min

    document.text is not a real property.

  3. 3

    Fix the classList typo

    easy8 min

    classlist is spelled with the wrong capitalisation.

  4. 4

    Fix the missing length

    easy8 min

    A node list is compared directly instead of its count.

  5. 5

    Fix the wrong element read

    easy8 min

    The code reads a heading level that is not on the page.

Ready to write the code?

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

Open the workspace