JS Exercise :1
These use cases illustrate the versatility of the onclick() event in JavaScript,
enabling developers to create interactive and dynamic web applications tailored
to user actions and preferences.
Attempt any 20 use case and submit on your LMS also mention the
question number .
1. Display an Alert: Show a simple alert message.
2. Change Text Content: Change the text of a paragraph.
3. Hide an Element: Hide a div when clicked.
4. Show an Element: Show a hidden div when clicked.
5. Toggle Visibility: Toggle visibility of an element.
6. Change Background Color: Change the background color of a div.
7. Redirect to Another Page: Redirect to another URL.
8. Log to Console: Log a message to the console.
9. Change Image Source: Change the source of an image.
[Link] Font Size: Increase the font size of a text element.
[Link] a Sound: Play an audio file on click.
[Link] a New Element: Add a new paragraph to the document.
[Link] an Element: Remove an element from the DOM.
[Link] CSS Class: Change the class of an element to apply different
styles.
[Link] Current Time: Show the current time in an element.
[Link] Clicks: Count how many times a button has been clicked.
[Link] Text Color: Change the color of text on click.
[Link] Confirmation Dialog: Show a confirmation dialog and act based
on response.
[Link] an Element: Start a simple animation by changing position.
[Link] Input Value: Change the value of an input field.
[Link] Random Number: Display a random number on click.
22. Start Timer: Start a simple timer that counts seconds.
[Link] Modal Window: Open a modal dialog on button click.
[Link] Cursor Style: Change cursor style on hover and click.
[Link] User Input: Show user input from a text box in another element.
[Link] Form Input: Check if form input is valid on submit.
[Link] Border Style: Change border style of an element.
[Link] Data from API: Fetch data from an API and display it.
[Link] Class on Multiple Elements: Toggle class for multiple elements.
[Link] to Top of Page: Scroll back to the top of the page.
[Link] Random Quote: Show a random quote from an array.
[Link] Button Text on Click: Change the text of a button after clicking.
[Link] Mouse Position: Log mouse position when clicking.
[Link] List Items: Filter items in a list based on user input.
[Link] Loading Spinner: Show loading spinner while fetching data.
[Link] Video Source: Change video source when clicking different
thumbnails.
[Link] Item to Shopping Cart: Add selected item to cart in e-commerce
site.
[Link] Dark Mode/Light Mode: Switch between dark and light themes.
[Link]/Hide Password Field: Toggle visibility of password input field.
[Link] In/Out Image: Zoom in/out on image when clicked.
[Link] Tooltip on Hover/Click: Show tooltip with additional
information.
[Link] Form via AJAX Request: Submit form data without refreshing
page.
[Link] Countdown Timer: Create countdown timer that updates every
second.
[Link] Table Row on Click: Highlight table row when clicked.
[Link] External Link in New Tab: Open link in new tab/window when
clicked.
[Link] File on Click: Trigger file download when button is clicked.
[Link] Layout Style Dynamically: Switch between grid and list view
for items.
[Link] User Interactions for Analytics: Send user interaction data to
analytics service.
[Link] Image Carousel/Slider Control: Control image slider with
next/prev buttons.
[Link] Pagination Controls for Lists or Tables
[Link]/Hide Sidebar Navigation
[Link] Progress Bar Based on User Actions
[Link] FAQ Section with Expandable Answers
[Link] Search Functionality for Filtering Results
[Link] Custom Events for Advanced Interactions
[Link] onclick with SVG Elements for Interactive Graphics