JavaScript Event Handling: Exercises, Practice, Solutions

JavaScript Event Handling [10 exercises with solution ]

[An editor is available at the bottom of the page to write and execute the scripts.  Go to the editor]

1. Button Click Event

Write a JavaScript program that creates a button and add a click event listener to log a message when it's clicked.

Click me to see the solution

2. Dropdown Menu Toggle

Write a JavaScript program to create a dropdown menu that shows and hides its options when clicked.

Click me to see the solution

3. Mouse Enter Background Change

Write a JavaScript function that changes the background color of an element when a mouse enters it.

Click me to see the solution

4. Form Validation with Error Message

Write a JavaScript program that implements a "form" validation that displays an error message if a required field is left empty when submitting the form.

Click me to see the solution

5. Image Slideshow Navigation

Write a JavaScript program to create a slideshow that changes the displayed image when a next or previous button is clicked.

Click me to see the solution

6. Drag-and-Drop List Reordering

Write a JavaScript program to implement drag-and-drop functionality to allow users to reorder items in a list.

Click me to see the solution

7. Toggle Switch Implementation

Write a JavaScript program to implement a toggle switch that changes its state when clicked.

Click me to see the solution

8. Progress Bar Update

Write a JavaScript program to create a progress bar that updates its width based on task completion.

Click me to see the solution

9. Enter Key Detection in Input

Write a JavaScript program that adds a keydown event listener to a text input to detect when the "Enter key" is pressed.

Click me to see the solution

10. Double-Click Event Action

Write a JavaScript function that listens for a double click on an element and performs a specific action.

Click me to see the solution

More to Come !

* To run the code mouse over on Result panel and click on 'RERUN' button.*

Live Demo:

See the Pen javascript-common-editor by w3resource (@w3resource) on CodePen.

Do not submit any solution of the above exercises at here, if you want to contribute go to the appropriate exercise page.