Skip to main content

JavaScript Events — exercises and bug fixes

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

    Handle a click

    easy10 min

    When the button is clicked, put Clicked into #out.

  2. 2

    Count the clicks

    easy10 min

    Show how many times the button has been clicked.

  3. 3

    Use a named handler

    easy10 min

    Define a named function and attach it as the click handler.

  4. 4

    Handle two buttons

    easy10 min

    Make each button report its own name when clicked.

  5. 5

    Read a value on click

    medium10 min

    When the button is clicked, show the value of the input.

Find the bug(5)

  1. 1

    Fix the handler called immediately

    easy8 min

    Brackets run the function instead of passing it to the listener.

  2. 2

    Fix the on prefix in the event name

    easy8 min

    addEventListener takes click, not onclick.

  3. 3

    Fix the listener on the wrong element

    easy8 min

    The listener was attached to the output instead of the button.

  4. 4

    Fix the counter reset each time

    easy8 min

    Declaring the count inside the handler resets it on every click.

  5. 5

    Fix the second onclick overwriting the first

    easy8 min

    The onclick property holds only one handler.

Ready to write the code?

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

Open the workspace