Скачать или смотреть How to Fix Multiple Popups with the Same Content in JavaScript

Discover how to resolve the issue of displaying different content in multiple popups triggered by distinct buttons in your web application.
---
This video is based on the question https://stackoverflow.com/q/67391094/ asked by the user 'Zenos1618' ( https://stackoverflow.com/u/15835668/ ) and on the answer https://stackoverflow.com/a/67392606/ provided by the user 'Tony Zhang' ( https://stackoverflow.com/u/13783898/ ) 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: Multiple popups but same content

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.
---
How to Fix Multiple Popups with the Same Content in JavaScript

When developing interactive web applications, popups can provide valuable context and information to users. However, encountering issues with multiple popups displaying the same content can lead to confusion and a poor user experience. This is a common issue faced by developers, particularly when the same JavaScript variables and functions are reused for different buttons on the page.

In this guide, we will explore a specific case where two popups linked to different buttons only display the content of the first popup when triggered. We'll break down the solution to ensure that each button launches its respective popup with unique content.

Understanding the Problem

You might have encountered a scenario where:

You have two buttons, “Construction” and “Supply.”

Each button triggers a popup displaying a different message.

Clicking one button first might overwrite the popup content for the second button, causing both popups to show the same text.

This issue arises from how JavaScript functions and variables are scoped. Let’s dissect the provided code to understand why this happens.

The Core of the Issue

In the provided example, both popups share the same variable, popupWindow, and the same control logic through the RemovePopup function. As a result, when you open the first popup, it assigns content to popupWindow that is retained when you open the second one.

Breakdown of the Solution

To resolve this and create independent popups, follow these steps:

1. Consolidate the JavaScript Functions

Instead of defining separate functions with overlapping variable names, utilize a single function to handle both popups. You can pass the content as a parameter to the function.

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

2. Modify Button Event Handlers

Change the button event handlers to call showPopup with specific content.

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

3. Adjust the RemovePopup Function

You should also modify the RemovePopup function to reset the popupWindow variable, ensuring a new instance can be created whenever a button is clicked.

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

Conclusion

By consolidating your function and managing popup content dynamically through parameters, you ensure that each button operates independently without conflict. This structure not only resolves the issue but also makes your code cleaner and easier to maintain.

Now you can implement multiple popups in your application effortlessly with distinct content for each trigger. Happy coding!