how to give each button its own pop up

Question

how to give each button its own pop up

84 views Asked by Fancyson At 20 February 2024 at 06:09

I have an grid of buttons. Each button asks the user to create a category. I created a pop up that asks the user this. Right now, it works but when the user enters something into category one then presses the category two what they entered in category one is already there. to have each button be its own. Like if for category 1 the user enters animals, I want the pop up to keep that for that button pop up then the user can put something different for category 2. im thinking would I have to create multiple pop ups for each individual buttons or is there another way to use one popup. here is what I currently have.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <Style>
        #myPopup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 200px;
            background-color: #180951;
            border: 1px solid #888;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
        #myPopupClose {
            float: right;
            font-size: 28px;
            color: yellow;
            font-weight: bold;
            cursor: pointer;
        }
        #myPopupTextbox {
            width: 98%;
            height: 100px;
            background-color: #180951;
            border-color: #180951;
            color: yellow;
            resize: none;
        }
    </Style>
</head>

<body>
    <div class='container'>
        <div class='sections'>

            <div class='firstRow'>
                <button class="button">cat1</button>
                <button class="button">cat2</button>
                <button class="button">cat3</button>
            </div>
            <div id="myPopup">
                <span id="myPopupClose">x</span>
                <h3>Create a category</h3>
                <textarea id="myPopupTextbox" placeholder="Write something..."></textarea>
            </div>
            <script>

                var btn = document.getElementsByClassName("firstRow")[0];;
                var popup = document.getElementById("myPopup");
                var close = document.getElementById("myPopupClose");
                btn.onclick = function () {
                    popup.style.display = "block";
                }
                close.onclick = function () {
                    popup.style.display = "none";
                }

                window.onclick = function (event) {
                    if (event.target == popup) {
                        popup.style.display = "none";
                    }
                }
            </script>
        </div>
    </div>

</body>
</html>

Original Q&A

There are 1 answers

**Jones Joseph** · Accepted Answer · 2024-02-20T06:22:54+00:00

Use data-key attribute and var currentCat to keep track of which button is being clicked and which popup is currently open.

You can use a key value pair var catValues = {} to save the value that was entered for each category.

Whenever the textarea value changes, save the value to the respective key.

textarea.onchange = function(e) {
    catValues[currentCat] = e.target.value;
}

Then at each cat button click just fetch the value that was entered for that particular category or clear out the textarea is there is no value.

currentCat = e.target.getAttribute('data-key');
if (catValues[currentCat]) {
    textarea.value = catValues[currentCat];
} else {
    catValues[currentCat] = '';
    textarea.value = '';
}

This makes sure each cat button has its own value in the popup.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <Style>
    #myPopup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 200px;
      background-color: #180951;
      border: 1px solid #888;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }
    
    #myPopupClose {
      float: right;
      font-size: 28px;
      color: yellow;
      font-weight: bold;
      cursor: pointer;
    }
    
    #myPopupTextbox {
      width: 98%;
      height: 100px;
      background-color: #180951;
      border-color: #180951;
      color: yellow;
      resize: none;
    }
  </Style>
</head>

<body>
  <div class='container'>
    <div class='sections'>

      <div class='firstRow'>
        <button class="button" data-key="cat1">cat1</button>
        <button class="button" data-key="cat2">cat2</button>
        <button class="button" data-key="cat3">cat3</button>
      </div>
      <div id="myPopup">
        <span id="myPopupClose">x</span>
        <h3>Create a category</h3>
        <textarea id="myPopupTextbox" placeholder="Write something..."></textarea>
      </div>
      <script>
        var catValues = {};
        var currentCat = null;
        var btn = document.getElementsByClassName("firstRow")[0];;
        var popup = document.getElementById("myPopup");
        var close = document.getElementById("myPopupClose");
        var textarea = document.getElementById("myPopupTextbox");
        btn.onclick = function(e) {
          popup.style.display = "block";
          currentCat = e.target.getAttribute('data-key');
          if (catValues[currentCat]) {
            textarea.value = catValues[currentCat];
          } else {
            catValues[currentCat] = '';
            textarea.value = '';
          }
        }
        close.onclick = function() {
          popup.style.display = "none";
        }

        window.onclick = function(event) {
          if (event.target == popup) {
            popup.style.display = "none";
          }
        }

        textarea.onchange = function(e) {
          catValues[currentCat] = e.target.value;
        }
      </script>
    </div>
  </div>

</body>

</html>

TechQA.

how to give each button its own pop up

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Popular Questions

Popular Tags

Trending Questions