Question 210531 in Html Question posted in
Some basic documentation can be found here.

Html – How do I open the right popup content based on the ID of the div clicked?

I’m new to HMTL and I have been stuck on this problem. Say, I have these divs that the same class name and the only thing that differs them is the ID.

How do I make it so that they will display the right popup content upon being clicked? Since these popups share the same class name, only "you clicked the first button" is displayed no matter what I click.

I know this is very wrong but I still don’t understand how to use IDs.

.button {
  width: 200px;
  height: 200px;
  background-color: yellow;
  margin-bottom: 100px;
}

.popup {
  display: flex;
  position: fixed;
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 200;
  overflow-x: hidden;
}
<div class="button" id="1" onclick="openPopup()">fgdjgdfjgfk
  <div class="popup">you clicked the first button</div>
</div>

<div class="button" id="2" onclick="openPopup()">abc
  <div class="popup">you clicked the second button</div>
</div>

<script>
  function openPopup() {
    document.querySelector(".popup").style.width = "100%";
  }
</script>
Tags:

3

Answers


  1. 0

    Based on your HTML structure, you can select the popup content inside the clicked element.

    document.querySelectorAll('.button').forEach(el =>
  el.addEventListener('click', e => {
    el.querySelector('.popup').style.width = '100%';
  })
);
    .button{width:200px;height:200px;background-color:#ff0;margin-bottom:100px}.popup{display:flex;position:fixed;width:0;height:100%;top:0;left:0;background-color:rgba(0,0,0,.5);align-items:center;justify-content:center;z-index:200;overflow-x:hidden}
    <div class="button" id="1">fgdjgdfjgfk
  <div class="popup">you clicked the first button</div>
</div>
<div class="button" id="2">abc
  <div class="popup">you clicked the second button</div>
</div>
    Login or Signup to reply.
  2. 0

    You should add the custom popup message to each div

    <div class="button" id="1" onclick="openPopup()" popupMsg="Foo1">a</div>
<div class="button" id="2" onclick="openPopup()" popupMsg="Foo2">b</div>
<div class="button" id="3" onclick="openPopup()" popupMsg="Foo3">c</div>

    Then in your button handler, you should get the message to display from the element attribute. So

     var msg = myDiv.getAttribute("popupMsg"); // you can then use this string in the popup.

    Note: Setting the title field is a built in way to show a popup

    Login or Signup to reply.
  3. 0

    The CSS selector to access an element by id is #id. Note that an id cannot start with a numerical character. I would also use element.addEventListener rather than setting attributes in HTML.

    I have made a code snippet to help you understand.

    <!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <style>
    .button {
      width: 200px;
      height: 200px;
      background-color: yellow;
      margin-bottom: 100px;
    }
    
    .popup {
      display: flex;
      position: fixed;
      width: 0;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      align-items: center;
      justify-content: center;
      z-index: 200;
      overflow-x: hidden;
    }
  </style>

  <div class="button" id="button_1">Button 1</div>
  <div class="popup">You clicked "Button 1".</div>
  </div>

  <div class="button" id="button_2">Button 2</div>
  <div class="popup">You clicked "Button 2".</div>
  </div>

  <script>
    function openPopup(popup_num) {
      document.querySelectorAll(".popup")[popup_num - 1].style.width = "100%";
    }
    document.querySelector("#button_1").addEventListener("click", function() {
      openPopup(1);
    });
    document.querySelector("#button_2").addEventListener("click", function() {
      openPopup(2);
    });
  </script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search