The script for the last object in my loop is firing when I click on any of them

Question

I've been working on a page that pulls info a JSON array and loops through it, showing a clickable logo with a modal window that has more information in it. For reasons that I can't see, only the last modal in the array is firing when I click on any of them though.

I've tried moving the script into the array and placing individual copies of it inline with the code that I'm working with but I'm completely stumped as to why it would be doing this. I was able to get it to fire the popup for the first item in the array by manually setting the index value, but that's not going to be sustainable since I would have to keep adding new versions of it every time a new object is added to the JSON array.

jQuery(document).ready(function($) {
  var settings = {
    async: true,
    crossDomain: true,
    url:
      "https://api-url.com",
    method: "GET",
    headers: {
      accept: "api-json",
      authorization: "api-key"
    },
    data: "{}",
    contentType: "application/json",
    dataType: "json"
  };

  $.ajax(settings).done(function(response) {
    console.log(response);
    for (index in response.content) {
        $("#sponsors").append(
          '<a href="#" id="modalBtn' + [index] + '"><img src="' + response.content[index].logo + '"></a> \n' +
          
          // The Modal
          '<div id="' + [index] + '" class="sponsor-modal"> \n' +
          
            '<div class="sponsor-modal-content"><span class="close">&times;</span><p>' + response.content[index].name + '</p></div> \n' +
          
          '</div>'
            );
            // Get the modal
            var modal = document.getElementById([index]);

            // Get the button that opens the modal
            var btn = document.getElementById("modalBtn" + [index]);

            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[index];

            // When the user clicks the button, open the modal 
            btn.onclick = function() {
              modal.style.display = "block";
            }

            // When the user clicks on <span> (x), close the modal
            span.onclick = function() {
              modal.style.display = "none";
            }

            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) {
              if (event.target == modal) {
                modal.style.display = "none";
              }
            }
        }
    })
});

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Speakers</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
      /* The Modal (background) */
      .sponsor-modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0, 0, 0); /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
      }

      /* Modal Content/Box */
      .sponsor-modal-content {
        background-color: #fefefe;
        margin: 15% auto; /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
        width: 80%; /* Could be more or less, depending on screen size */
      }

      /* The Close Button */
      .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }

      .close:hover,
      .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div id="sponsors"></div>
  </body>
</html>

Edit: Here is the JSON I'm dealing with..

{
  "links": [
    {
      "rel": "self",
      "href": "https://api.url.com"
    }
  ],
  "content": [
    {
        "description": "Some Content Here",
        "level": 6,
        "logo": "https://url/llep2hufwsahu8eegbg0.png",
        "website": "http://url.com",
        "visible": true,
        "created": "2020-02-05T03:14:04.000+0000",
        "eventId": 215392,
        "name": "Name",
        "id": 217848,
        "type": "SPONSOR"
    },
    {
        "description": "Some Other Content Here",
        "level": 6,
        "logo": "https://url/jfdaklfjdkalda.png",
        "website": "http://url2.com",
        "visible": true,
        "created": "2020-01-21T17:22:05.000+0000",
        "eventId": 215392,
        "name": "Other Name",
        "id": 216197,
        "type": "SPONSOR"
    },
    {
        "description": "Some Additional Content Here",
        "level": 4,
        "logo": "https://url/fdsafdasfdafd.png",
        "website": "https://www.url2.com/",
        "visible": true,
        "created": "2020-01-21T17:19:24.000+0000",
        "eventId": 215392,
        "name": "Other Other Name",
        "id": 216195,
        "type": "SPONSOR"
    }
  ]
}

Can you also provide the JSON object returned to the AJAX call? — Aydin4ik, Feb 06 '20 at 04:47
hi you assign the id by string using single code .But here var modal = document.getElementById([index]); ,you used as interger — LDS, Feb 06 '20 at 05:48
@LDS - So would I need to change var modal to something else? — Neil Hinkle, Feb 06 '20 at 12:07
Duplicate of: [Why does the alert coming from my loop always return the last value, not each iteration value?](https://stackoverflow.com/questions/17750163/why-does-the-alert-coming-from-my-loop-always-return-the-last-value-not-each-it) — Dexygen, Feb 06 '20 at 12:17
Variables declared using `var` have function scope, but your code expects them to have block scope. Please see my answer. — Ben Aston, Feb 06 '20 at 12:31
@Dexygen's link did the trick! I didn't find it earlier but I probably wasn't wording my search properly. — Neil Hinkle, Feb 06 '20 at 15:31

Ben Aston · Answer 1 · 2020-02-06T12:28:31.093

-1

Change

var modal = document.getElementById([index]);
var btn = document.getElementById("modalBtn" + [index]);
var span = document.getElementsByClassName("close")[index];

to

let modal = document.getElementById([index]);
let btn = document.getElementById("modalBtn" + [index]);
let span = document.getElementsByClassName("close")[index];

I think.

edited Feb 06 '20 at 12:28

answered Feb 06 '20 at 12:15

Ben Aston

53,718
65
205
331

The script for the last object in my loop is firing when I click on any of them

1 Answers1