Скачать или смотреть How to Display Multiple Divs with the Same ID and OnClick Function in JavaScript, HTML, and CSS

Learn how to manage multiple divs with the same OnClick function using JavaScript, HTML, and CSS, allowing for better user interaction on your web pages.
---
This video is based on the question https://stackoverflow.com/q/73213554/ asked by the user 'Liambails1' ( https://stackoverflow.com/u/19670004/ ) and on the answer https://stackoverflow.com/a/73213997/ provided by the user 'Mujeeb Kalwar' ( https://stackoverflow.com/u/9282230/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to display div with same ID and OnClick function - Javascript, HTML and CSS

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Mastering JavaScript: Displaying Multiple Divs on Click

As a beginner in JavaScript, you may face challenges when working with interactive elements like divs. A common issue arises when multiple divs are assigned the same ID and you want them to respond independently to an OnClick event. In this guide, we will explore this problem and walk through an effective solution step-by-step.

The Problem

Imagine you have two sections on your webpage, each containing a reply link. Both links are set up to display a reply div upon being clicked. However, since both divs have the same ID, clicking on either reply link only opens the first div. This makes it impossible to manage the display of each reply div independently.

Example of the Current Structure

Here’s the initial HTML structure of our comment sections:

[[See Video to Reveal this Text or Code Snippet]]

The issue here is that both reply divs are still being referred to by the same ID. Let's look at an effective strategy to overcome this.

The Solution

To solve this problem, we need to change our approach by identifying each reply div in a unique manner. Here’s how to make it work:

Step 1: Assign Unique IDs

Instead of using the same ID for each reply div, we can append an index or a unique identifier to each reply div's ID. This allows us to reference them independently.

Step 2: Update the JavaScript Functions

Modify the JavaScript functions to accept an index parameter so that we can handle which specific div should be displayed or hidden:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Modify the HTML Structure

Next, update the HTML markup accordingly. Each comment and reply div should use the new structure:

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Update the CSS Styles

Update your CSS styles to work with the new class names instead of IDs. For example:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following these steps, you can effectively manage multiple divs that originally had the same ID while allowing for separate onClick functionalities. This structure enhances user interaction on your web page and opens up opportunities for scaling your coding skills in JavaScript, HTML, and CSS!

Now you'll be able to create dynamic interactivity that responds correctly to user actions. Keep practicing and happy coding!