
Practice 50 JavaScript Event Handling Programming Questions
Q1. Write a JavaScript program to display an alert when a button is clicked.
Input: Button click event
Expected Output: Alert with the message `"Button clicked!"`
Q2. Write a JavaScript program to change the background color of a page when a button is clicked.
Input: Button click event
Expected Output: Background color changes to blue.
Q3. Write a JavaScript program to show a message when the mouse is over a div element.
Input: Mouseover event on a `div` element
Expected Output: Message `"Mouse is over the div!"` appears.
Q4. Write a JavaScript program to hide an element when it is clicked.
Input: Click event on an element
Expected Output: The element is hidden.
Q5. Write a JavaScript program to change the text of a button when it is clicked.
Input: Button click event
Expected Output: Button text changes to `"Clicked!"`
Q6. Write a JavaScript program to display the coordinates of the mouse when clicked on the page.
Input: Click event on the page
Expected Output: Coordinates of the mouse (e.g., `X: 50, Y: 100`).
Q7. Write a JavaScript program to change the text of a paragraph when the user presses the "Enter" key.
Input: "Enter" key press event
Expected Output: The paragraph text changes to `"Enter key pressed!"`
Q8. Write a JavaScript program to change the background color of a div when the mouse is clicked inside the div.
Input: Click event inside the `div` element
Expected Output: The background color of the div changes.
Q9. Write a JavaScript program to display the value of an input field when it is changed.
Input: Change event on an input field
Expected Output: Displays the current value of the input field.
Q10. Write a JavaScript program to show a confirmation box when a button is clicked.
Input: Button click event
Expected Output: A confirmation box appears with options `"OK"` and `"Cancel"`.
Q11. Write a JavaScript program to prevent the default action of a form submission.
Input: Submit event on a form
Expected Output: The form does not submit, and an alert `"Form submission prevented!"` appears.
Q12. Write a JavaScript program to log a message when a key is pressed down.
Input: Keydown event
Expected Output: A log of the key pressed in the console.
Q13. Write a JavaScript program to toggle the visibility of a paragraph when a button is clicked.
Input: Button click event
Expected Output: The paragraph toggles between visible and hidden.
Q14. Write a JavaScript program to stop the propagation of an event in the DOM.
Input: Click event on a child element
Expected Output: The click event is not propagated to the parent element.
Q15. Write a JavaScript program to display a tooltip when hovering over an element.
Input: Mouseover event on an element
Expected Output: A tooltip appears above the element.
Q16. Write a JavaScript program to change the text color of a paragraph when the user clicks on it.
Input: Click event on a paragraph
Expected Output: The paragraph text color changes to red.
Q17. Write a JavaScript program to display the current date and time when the button is clicked.
Input: Button click event
Expected Output: Displays the current date and time on the page.
Q18. Write a JavaScript program to disable a button after it is clicked.
Input: Button click event
Expected Output: The button becomes disabled after clicking.
Q19. Write a JavaScript program to show a message when the user resizes the window.
Input: Window resize event
Expected Output: Message `"Window resized!"` appears.
Q20. Write a JavaScript program to open a new browser window when a button is clicked.
Input: Button click event
Expected Output: A new browser window opens.
Q21. Write a JavaScript program to show an alert when the user moves the mouse outside of a specific element.
Input: Mouseout event on a specific element
Expected Output: Alert `"Mouse is out!"`
Q22. Write a JavaScript program to log a message when the user presses the "Escape" key.
Input: Keydown event for the "Escape" key
Expected Output: Log `"Escape key pressed!"` to the console.
Q23. Write a JavaScript program to change the text of a heading when the mouse is clicked on it.
Input: Click event on a heading
Expected Output: The text of the heading changes.
Q24. Write a JavaScript program to display an image when a button is clicked.
Input: Button click event
Expected Output: The image appears on the page.
Q25. Write a JavaScript program to change the style of a paragraph when a button is clicked.
Input: Button click event
Expected Output: The style of the paragraph changes (e.g., background color, font size).
Q26. Write a JavaScript program to display the value of a slider input when it is changed.
Input: Change event on a slider input
Expected Output: Displays the current value of the slider.
Q27. Write a JavaScript program to highlight an element when it is clicked.
Input: Click event on an element
Expected Output: The element is highlighted with a different background color.
Q28. Write a JavaScript program to log the name of the element that was clicked.
Input: Click event on any element
Expected Output: Logs the name of the clicked element to the console.
Q29. Write a JavaScript program to change the content of an element when a button is clicked.
Input: Button click event
Expected Output: The content of the element changes to `"New content"`.
Q30. Write a JavaScript program to remove an element when a button is clicked.
Input: Button click event
Expected Output: The element is removed from the page.
Q31. Write a JavaScript program to show a loading spinner when a button is clicked.
Input: Button click event
Expected Output: A loading spinner appears.
Q32. Write a JavaScript program to prevent a link from opening a new page when clicked.
Input: Click event on a link
Expected Output: The link does not navigate to the new page.
Q33. Write a JavaScript program to toggle the background color of a page when the user clicks a button.
Input: Button click event
Expected Output: The background color toggles between two colors.
Q34. Write a JavaScript program to log a message when the user submits a form.
Input: Submit event on a form
Expected Output: Logs the message `"Form submitted!"` to the console.
Q35. Write a JavaScript program to play a sound when a button is clicked.
Input: Button click event
Expected Output: A sound plays.
Q36. Write a JavaScript program to scroll to the top of the page when a button is clicked.
Input: Button click event
Expected Output: The page scrolls to the top.
Q37. Write a JavaScript program to change the text of a button when the mouse is over it.
Input: Mouseover event on a button
Expected Output: The button text changes to `"Mouse over"`.
Q38. Write a JavaScript program to disable form inputs when a checkbox is checked.
Input: Checkbox click event
Expected Output: All form inputs are disabled when the checkbox is checked.
Q39. Write a JavaScript program to display the user input when a button is clicked.
Input: Button click event, and user input from a text field
Expected Output: The user input is displayed on the page.
Q40. Write a JavaScript program to change the color of a button when it is clicked.
Input: Button click event
Expected Output: The button color changes to red.
Q41. Write a JavaScript program to log a message when the user right-clicks on an element.
Input: Right-click event on an element
Expected Output: Logs `"Right-click detected!"` to the console.
Q42. Write a JavaScript program to increase the font size of a text when the mouse is over it.
Input: Mouseover event on a text element
Expected Output: The font size of the text increases.
Q43. Write a JavaScript program to count how many times a button has been clicked.
Input: Button click event
Expected Output: A counter that increments each time the button is clicked.
Q44. Write a JavaScript program to change the text of an element when the user presses a key.
Input: Keydown event
Expected Output: The text of the element changes based on the key pressed.
Q45. Write a JavaScript program to display a message when a file input is changed.
Input: Change event on a file input
Expected Output: The file name is displayed.
Q46. Write a JavaScript program to trigger a click event on a hidden button when another button is clicked.
Input: Button click event on the visible button
Expected Output: The hidden button is clicked programmatically.
Q47. Write a JavaScript program to display a message when the user clicks anywhere on the page.
Input: Click event on the page
Expected Output: Displays the message `"Page clicked!"`
Q48. Write a JavaScript program to show an alert when the page is fully loaded.
Input: `window.onload` event
Expected Output: An alert with the message `"Page is loaded!"`
Q49. Write a JavaScript program to change the image of a photo when the user clicks on a button.
Input: Button click event
Expected Output: The image source changes to a new image.
Q50. Write a JavaScript program to toggle the class of an element when it is clicked.
Input: Click event on an element
Expected Output: The class of the element toggles between two classes.