the popup window is always displaying the same data

user_13294792 0
Viewed 105

I implemented a popup that displays the details of a product when the user clicks on a button, so the popup should display different details for different products.

But whichever button is clicked, the popup always displays the details of the last product. Why might that be?

CSS:

.cards {
    overflow: auto;
    white-space: nowrap;
    margin-top: 10px;
}

.options a {
    margin-left: 10px;
    text-decoration: none;
}

.card {
    display: inline-block;
    margin: 5px;
    height: 200px;
}

.bgimg {
    height: 410px;
}

.scm a {
    text-decoration: none;
}

.fb:hover {
    color: #4267B2
}

.insta:hover {
    color: #FD1D1D;
}

.gm:hover {
    color: #B23121;
}

.centring {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-hide {
    position: fixed;
    padding: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 100ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 800px;
    max-width: 80%;
    display: none;
}

.popup-show {
    position: fixed;
    padding: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 100ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 800px;
    max-width: 80%;
    display: block;
}

JS:

function showpopup(params) {
    var card = document.getElementsByClassName('card');
    var popup;
    for (let j = 0; j < card.length; j++) {

        popup = document.getElementsByClassName('popup')[j];
        popup.style.display = 'block';
    }
}
function hidepopup(params) {
    var card = document.getElementsByClassName('card');
    var popup;
    for (let i = 0; i < card.length; i++) {

        popup = document.getElementsByClassName('popup')[i];
        popup.style.display = 'none';
    }

}

HTML:

<div class="container-full" id="container">
    <div class="product-cards">
        <div class="card" style="width:250px;height: 200px;">
            <img class="card-img-top" src="1.jpg" alt="Card image">
            <div class="card-body">
                <button class="btn btn-primary" id="showpopup" onclick="showpopup()">Open</button>
            </div>
        </div>
        <div class="card" style="width:250px;height: 200px;">
            <img class="card-img-top" src="2.jpg" alt="Card image">
            <div class="card-body">
                <button class="btn btn-primary" id="showpopup" onclick="showpopup()">Open</button>
            </div>
        </div>

    </div>
    <div class="product-popups">
        <div class="popup-hide popup" id="popup">
            <button class="btn btn-primary" id="hidepopup" onclick="hidepopup()">&times;</button>
            <hr>
            <div class="row">
                <div class="col-sm-4">

                    <img style="width: 200px;max-width: 90%;" src="1.jpg" alt="">
                </div>
                <div class="col-sm-8">

                    price:200DA <br>
                    <br><br>
                </div>
            </div>

        </div>
        <div class="popup-hide popup" id="popup">
            <button class="btn btn-primary" id="hidepopup" onclick="hidepopup()">&times;</button>
            <hr>
            <div class="row">
                <div class="col-sm-4">

                    <img style="width: 200px;max-width: 90%;" src="2.jpg" alt="">
                </div>
                <div class="col-sm-8">

                    price:300DA <br>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti, molestiae totam aliquam
                    quas optio praesentium! Soluta id ea est maxime laudantium, iure voluptatibus voluptatum et nemo
                    modi reprehenderit bea
                    tae. Dolorum?
                    <br><br>
                </div>
            </div>

        </div>

    </div>
</div>
</div>

Any suggestions on how to solve the problem?

popup css html javascript
2 Answers

you have some mistakes in your code:

first: you defined "params" as an argument of your functions but you did not use it.

second: you have some tags with the same id in your html code, it is not a valid "html" that we use same id for multi tags

third: that is the reason of showing only the last popup is that you used the "for-loop" inside your function, that means by clicking each "button" the codes loop throw all tags with that class, and finally shows the last one. you do not need "for-loop". you can use your "params" argument of your function and give id to the pop-up windows, like the code that I will post:

function showpopup(params) {
        var card= document.getElementsByClassName('card');
        var popup;
//        for (let j = 0; j < card.length; j++) {
        
        popup=document.getElementById(params);
        popup.style.display='block';
//        }
        
        

      }
      function hidepopup(params) {
        var card= document.getElementsByClassName('card');
        var popup;
        
        
        popup=document.getElementById(params);       
        popup.style.display= 'none';


      }
.cards {overflow: auto;white-space: nowrap;margin-top: 10px;}
    .options a {margin-left: 10px;text-decoration: none;}
    .card {display: inline-block;margin: 5px; height: 200px ;}
    .bgimg {height:410px;}
    .scm a {text-decoration: none;}
    .fb:hover {color:#4267B2}
    .insta:hover {color: #FD1D1D;}
    .gm:hover {color: #B23121;}
    .centring {margin: auto; display: flex;justify-content: center; align-items: center;}
    
    .popup-hide { position: fixed;
    padding: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;
    transition: 100ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 800px;
    max-width: 80%;
  display: none;}
    .popup-show { position: fixed;
    padding: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;
    transition: 100ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color:white;   
    width: 800px;
    max-width: 80%;
   display: block;}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pop-up</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
   <div class="container-full" id="container">
      <div class="product-cards">
        <div class="card" style="width:250px;height: 200px;">
          <img class="card-img-top" src="1.jpg" alt="Card image">
          <div class="card-body">
            <button class="btn btn-primary" id="showpopup" onclick="showpopup('pop1')">Open</button>
          </div>
        </div>
        <div class="card" style="width:250px;height: 200px;">
          <img class="card-img-top" src="2.jpg" alt="Card image">
          <div class="card-body">
            <button class="btn btn-primary" id="showpopup" onclick="showpopup('pop2')">Open</button>
          </div>
        </div>
      
      </div>
      <div class="product-popups">
        <div class="popup-hide" id="pop1"> 
          <button class="btn btn-primary" id="hidepopup" onclick="hidepopup('pop1')">&times;</button>
          <hr>
          <div class="row">
            <div class="col-sm-4">
             
              <img style="width: 200px;max-width: 90%;" src="1.jpg" alt="">
            </div>
            <div class="col-sm-8">
              
              price:200DA <br>
              <br><br>
            </div>
          </div>
        
        </div>
        <div class="popup-hide" id="pop2"> 
          <button class="btn btn-primary" id="hidepopup" onclick="hidepopup('pop2')">&times;</button>
          <hr>
          <div class="row">
            <div class="col-sm-4">
             
              <img style="width: 200px;max-width: 90%;" src="2.jpg" alt="">
            </div>
            <div class="col-sm-8">
              
              price:300DA <br>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti, molestiae totam aliquam 
              quas optio praesentium! Soluta id ea est maxime laudantium, iure voluptatibus voluptatum et nemo modi reprehenderit bea
              tae. Dolorum?
              <br><br>
            </div>
          </div>
        
        </div>
        
        </div>
      </div>

    <script src="javascript.js"></script>
</body>
</html>

user_137709360

I completely changed your javascript code, and I hope this is not critical for you. The logic uses the forEach() method. Also, I remove calls to functions from the html structure.

var popup = document.querySelectorAll('.popup');
var btn = document.querySelectorAll('.card-body button');
var btn_close = document.querySelectorAll('.popup-hide.popup button');
        
Array.from(btn).forEach(function(btnArray, i) {
btnArray.addEventListener('click', function() {
    popup[i].style.display = 'block';  
  });
});

Array.from(btn_close).forEach(function(btn_closeArray, i) {
btn_closeArray.addEventListener('click', function() {
    popup[i].style.display = 'none';  
  });
});
.cards {overflow: auto;white-space: nowrap;margin-top: 10px;}
    .options a {margin-left: 10px;text-decoration: none;}
    .card {display: inline-block;margin: 5px; height: 200px ;}
    .bgimg {height:410px;}
    .scm a {text-decoration: none;}
    .fb:hover {color:#4267B2}
    .insta:hover {color: #FD1D1D;}
    .gm:hover {color: #B23121;}
    .centring {margin: auto; display: flex;justify-content: center; align-items: center;}
    
    .popup-hide { position: fixed;
    padding: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;
    transition: 100ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 800px;
    max-width: 80%;
  display: none;}
    .popup-show { position: fixed;
    padding: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;
    transition: 100ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color:white;   
    width: 800px;
    max-width: 80%;
   display: block;}
<div class="container-full" id="container">
      <div class="product-cards">
        <div class="card" style="width:250px;height: 200px;">
          <img class="card-img-top" src="1.jpg" alt="Card image">
          <div class="card-body">
            <button class="btn btn-primary" id="showpopup">Open</button>
          </div>
        </div>
        <div class="card" style="width:250px;height: 200px;">
          <img class="card-img-top" src="2.jpg" alt="Card image">
          <div class="card-body">
            <button class="btn btn-primary" id="showpopup">Open</button>
          </div>
        </div>
      
      </div>
      
      
      <div class="product-popups">
      
      
      
        <div class="popup-hide popup" id="popup"> 
          <button class="btn btn-primary" id="hidepopup">&times;</button>
          <hr>
          <div class="row">
            <div class="col-sm-4">
             
              <img style="width: 200px;max-width: 90%;" src="1.jpg" alt="">
            </div>
            <div class="col-sm-8">
              
              price:200DA <br>
              <br><br>
            </div>
         </div>
        
        </div>
        
        
        
        <div class="popup-hide popup" id="popup"> 
          <button class="btn btn-primary" id="hidepopup">&times;</button>
          <hr>
          <div class="row">
            <div class="col-sm-4">
             
              <img style="width: 200px;max-width: 90%;" src="2.jpg" alt="">
            </div>
            <div class="col-sm-8">
              
              price:300DA <br>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti, molestiae totam aliquam 
              quas optio praesentium! Soluta id ea est maxime laudantium, iure voluptatibus voluptatum et nemo modi reprehenderit bea
              tae. Dolorum?
              <br><br>
            </div>
          </div>
        
        </div>
        
        </div>
      </div>

user_135734440
Related