What could be the reason behind the improper display of JavaScript for ID overlay2?

Why is it that when I try to have two overlays with different messages display upon clicking buttons, they both end up showing the same message? Even after changing the ID tag names, the issue persists. Can someone shed some light on what might be causing this?

    `function on() {
     document.getElementById("btn1").style.display = "block";
     }

     function off() {
     document.getElementById("overlay").style.display = "none";
     }

     function on() {
     document.getElementById("overlay2").style.display = "block";
      }

     function off() {
     document.getElementById("overlay2").style.display = "none";
     }

     <body>


     <table width="600px" border="0" bordercolor="" cellspacing="0" cellpadding="0">
        <tbody>
      <!-- start of Sku 1-->
      <td width="250" align="center"> 
     <div class="polaroid">
     <div id="overlay" onclick="off()">
     <div id="text">Co flex , the best product in the world. Yes this is a rainbow color product but 
      loving this is the collest thing you could ever do. Im serious this is the best product in the 
       planet. Let me tell you what you need to play with  so that you could get this amazing 
       product</div>
      </div>
     <button id="btn1" onclick="on()">Product Information</button>
      <img src="https://s3.amazonaws.com/cdn.shopmedvet.com/images/large/COFLEX-VET4.jpg" alt"coflex" 
        style="width: "350px">

       <div class="container">

      <!-- start of form submission code-->
                                       <div class="form-group " width="281">
     <label for="field_330"  style="font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; 
         font-size: 14px; font-weight: bold">SKU: 46711-212X
        <h4>Retail: <h3 style="font-size:20px">$9.99</h3></h4>

        <div class=SKuQTY>
        <label for="field_328" style="font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; 
           font-size: 14px; font-weight: bold">Quantity</label>
                                                                 </div>                                                                                                                  
           <input class="form-control" type="text" name="field_328" id="field_328" value="" size="4" 
             maxlength="6" > </div>   <span class="help-block">
             <br>
             </br>
             <label for="field_329"  style="font-family: 'Helvetica Neue', Helvetica, Arial, 'sans- 
                   serif'; font-size: 14px; font-weight: bold">Make A Deal</label>

                    <div class="Sku1">
                    <input class="form-control" type="text" name="field_329" id="field_329" value="" 
                  size="4" maxlength="6" >
                   </div> 
                     </div>
                         </div>
                  </div>                                                     </td>
                                                                                   <!-- start of Sku 
                              1-->
           <td width="250" align="center"> 
         <div class="polaroid2">
         <div id="overlay2" onclick="off()">
         <div id="text2"> helllo</div>
          </div>

           <button id="btn2" onclick="on()">Product Information</button>
          <img src="https://s3.amazonaws.com/cdn.shopmedvet.com/images/large/COFLEX-VET4.jpg" 
         alt"coflex" style="width: "350px">

           <div class="container2">

                            <!-- start of form submission code-->
                                       <div class="form-group " width="281">
              <label for="field_330"  style="font-family: 'Helvetica Neue', Helvetica, Arial, 'sans- 
               serif'; font-size: 14px; font-weight: bold">SKU: 46711-212X
               <h4>Retail: <h3 style="font-size:20px">$9.99</h3></h4>

                <div class=SKuQTY>
                <label for="field_328" style="font-family: 'Helvetica Neue', Helvetica, Arial, 'sans- 
                        serif'; font-size: 14px; font-weight: bold">Quantity</label>
                                                                 </div>                                                                                                                  
                      <input class="form-control" type="text" name="field_328" id="field_328" 
                       value="" size="4" maxlength="6" > </div>   <span class="help-block">
                      <br>
                         </br>
                       <label for="field_329"  style="font-family: 'Helvetica Neue', Helvetica, 
                        Arial, 'sans-serif'; font-size: 14px; font-weight: bold">Make A Deal</label>

                      <div class="Sku1">
                      <input class="form-control" type="text" name="field_329" id="field_329" 
                      value="" size="4" maxlength="6" >
                       </div> 
                     </div>
                         </div>
                  </div>                                                     </td>                    


                     </table>

                     </body>
javascriptjqueryhtmlcss

Answer №1

If you're looking for a solution, here's one that doesn't repeat your HTML code. In the example below, I've created a single overlay and popup that can be reused for all items. The code is commented to make it easier to understand, but feel free to ask if anything is unclear.

Some tips to keep in mind:

  • DRY Principle: Avoid repeating yourself by creating reusable functions or classes instead of copy/pasting code. Use classes instead of IDs for shared behaviors among elements.
  • Separation of Concerns: Avoid mixing HTML, JS, and CSS. Attach event listeners in JavaScript, use classes for styling in CSS, and keep your HTML clean.
// JavaScript code here...
/* CSS code here... */
<div class="item">
  <img src="image-url.jpg">
  <h3>Product Name</h3>
  <button class="show-info-btn">More Info</button>
  <div class="info">Additional information about the product.</div>
</div>

<div id="overlay" title="Close">
  <div id="popup" title="">
    <div id="popup-close-btn" title="Close"></div>
    <div id="popup-content">Content goes here.</div>
   </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Certain browsers are experiencing issues with text overlay functionality.`

I have managed to successfully create the necessary code to incorporate an image with a child element containing text overlaying the image. However, this functionality does not appear to be working on Internet Explorer (IE), and I am struggling to find a C ...

htmlcssinternet-explorerbootstrap-4

URL not functioning properly on Django CMS menu

After setting up django-cms and creating a collapsible menu with categories and subcategories, I encountered an issue. When clicking on a main category, the URL appears correct but it does not navigate to the corresponding page. Main categories without chi ...

javascriptdjangomenudjango-cms

Problem with loading images on an HTML webpage

After refreshing the page, I'm encountering an issue where the image is not loading. However, if I switch tabs from MEN to WOMEN and back again, the image will display without any problem. Even making changes in the CSS doesn't seem to affect thi ...

jqueryhtmlcssruby-on-railsruby-on-rails-4

Having Trouble with Your CSS Styles?

After working with HTML and CSS for over 5 years, I find myself stumped by this particular issue. At the provided URL, there is a single div in that container with an ID of Clarity. The CSS rules I have implemented are as follows: #clarity { text-align: ...

htmlcss

Having trouble formatting an AJAX POST request properly

Despite my best efforts, I continue to encounter the dreaded 500 (Internal Server Errors) every time I try to execute a POST request to https://rates.tradelanes.us/bankaccount/record/create. I suspect it has something to do with the format of my data. Howe ...

javascriptjqueryajax

Uploading multiple files in Symfony 2.3 using Dropzone Feature

I decided to experiment with a new JQuery library called dropzone.js Dropzone.js provides a user-friendly multi upload interface that includes drag and drop functionality. However, I encountered difficulty with Symfony's multi upload system. The sp ...

phpjquerysymfonydropzone.js

Can mouseenter and mouseleave events be implemented in Chart.js?

Currently, I am using the onHover function on each pie to implement some scale/zoom effect. However, I would like to switch to using mouseenter and mouseleave. When there is a mouseenter event on a pie, it should enlarge with scale/zoom effect, and when th ...

javascriptjquerychartschart.jspie-chart

Managing joopz, most likely using either jquery or php

Have you checked out this cool website: This site allows you to send and receive text messages using your browser. I'm curious if it's possible for me to automate the process of controlling and collecting data from the browser. This would enabl ...

c#javaphpjqueryjson

What is the best way to get my loading screen div to cover the entirety of my screen, including all content beneath it?

In order to create a loading screen, I am utilizing PHP to dynamically load specific services for my website. I attempted to set the height of my wrapper div to 100% but it did not produce the desired results. After that, I experimented with setting the he ...

phphtmlcss

Find the nearest iframe relative to a parent element

I am attempting to find the nearest iframe element to a parent element in order to pinpoint the specific iframe that I want to customize using CSS: <div class ="accroche"> <iframe></iframe> <iframe></iframe> &l ...

javascripthtmlcssiframe

Is it necessary for nested Bootstrap 3 rows to be enclosed within a col-sm-*?

Is it necessary for nested Bootstrap 3 rows to be within a col-sm-* or can they also be nested within a col-md-, col-xs-, etc? The documentation specifies col-sm-* but does not clearly state if nesting within other col sizes is not allowed. http://getboo ...

csstwitter-bootstraptwitter-bootstrap-3

This function does not have the capability to save cookies

I am attempting to create and retrieve a cookie using JavaScript. Despite running the code below in Google Chrome, the cookie does not persist after page reload. Here is my code: <html> <title> Cookies </title> <b ...

javascripthtmlcookies

Utilize Node.js driver to export a Mongo collection into a JSON file

How can I export a MongoDB collection to a JSON format using the Node.js driver and fs.writeFile? ...

javascriptjsonnode.jsmongodbmongoose

Mastering the art of resolving a dynamic collection of promises with '$.all'

Imagine having 3 promises and passing them to $q.all. This results in a new promise that resolves when the 3 promises are resolved. But what if I realize before the 3 promises resolve that I also want a 4th promise to be resolved? Can this be achieved? I ...

javascriptangularjspromise

As the page is scrolled upwards, the custom cursor's location shifts accordingly

In developing a custom hover cursor for my video div, I am encountering an issue where the cursor does not move with my mouse and remains in place when I scroll. Could someone please review my code and identify what I am doing wrong? Additionally, I have ...

htmlcssgsap

Execute an AJAX function to monitor a JSON response at intervals of 3 seconds

I'm looking to verify if my user has been updated from another system using JavaScript. Can anyone assist me in creating a function that can analyze a JSON response and determine if it is true or false? The URL /user/updatecheck/ provides a JSON res ...

javascriptajax

Using Jquery to emphasize or de-emphasize a table row with a click action

I would like my script to highlight the selected row, which it currently does successfully. However, I want the previously highlighted row to be automatically deselected when a new row is selected. How can I achieve this? Below is the existing code for se ...

jquery

The ultimate guide to personalizing group titles in Angular UI-Select

Is there a way in Angular ui-select to customize the group label? I want to make it larger than the selection items as shown in the image below. https://i.stack.imgur.com/ofcak.png The list is currently grouped by country, but how can I adjust the size o ...

javascripthtmlcssangularjsangular-ui-select

I'm encountering an issue: "AppDepartment" class not found while trying to view create.blade.php in E:proiecteHRmanagement-app esourcesviewsadminuser. Can you help me troubleshoot this error?

Need assistance with the error message "Class 'APP\Department' not found" while working on my HR Management App. I am trying to include departments and roles in my form. This is my UserController: <?php namespace App\Http\Cont ...

phphtmllaravelclass

Exploring the power of Nestjs EventEmitter Module in combination with Serverless functions through the implementation of Async

I am working on implementing an asynchronous worker using a serverless lambda function with the assistance of the nestjs EventEmitter module. The handler is being triggered when an event is emitted, but the function closes before the async/await call. I ...

javascriptnestjsserverless-frameworkeventemitter