Practice 50 JavaScript Event Handling Programming Questions, TechnoVlogs

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.

Share on Social Media