GetelementbyID() when the element is dynamically created by js

Question

I'm new to JavaScript and for school I got do a project where I show all the car parks of a selected area. I did the map using leaflet and it works kind of good. I now need to add a reservation zone and I wanted to do it when a button is clicked on a pop-up so I did my pop-up and just let JavaScript write the html code. Now that I have that button with "plus" as an id, I want to make it open the reservation zone but I got an error of promise :

Uncaught (in promise) TypeError: plus is null in script.js:110:13.

I tried to find a solution and read that was probably a order of loading issue, I tried to fix it and just don't know how, that's why I am creating the post :)

JS Code :

 for (let i = 0; i < tab.length; i++) {
             L.marker(tab[i]["geo"], {icon: myIcon}).addTo(map)
             .bindPopup(
                "<div class = 'infos'>"
                        + "<span class = 'nomparking'>" + tab[i]["nom_parking"].toUpperCase() + "</span> <br>"
                        + "<span class = 'adresse'>" + tab[i]["adresse"][0].toUpperCase() + tab[i]["adresse"].slice(1) +
                        "<br> " + tab[i]["cp"] + " " + tab[i]["ville"] + "</span> <br>"
                + "</div>"

                + "<div id='bas'> "
                    + "<div class = 'liens'>"
                            + "<a href='" + tab[i]["site"] + "'> <button id='site'> <img src='https://img.icons8.com/material/24/ffffff/external-link--v1.png-'/> <span> Site web </span> </button> </a>"
                            + "<a href='" + gmap(tab[i]["geo"],tab[i]["adresse"],tab[i]["nom_parking"],tab[i]["cp"],tab[i]["ville"]) +
                            "' target='_blank'> <button id='itin'> <img src='https://img.icons8.com/material/24/ffffff/itinerary--v1.png'/> <span> Itinéraire </span> </button>  </a>"
                            + "<button id='plus'> <img src='https://img.icons8.com/material/24/ffffff/more--v1.png'/> </button>"
                    + "</div>" 

                    + "<div class = 'res'>"
                            +"<button > <img src='https://img.icons8.com/material/24/ffffff/car--v1.png'/> <span> Réservation Voiture </span> </button>"
                            +"<button id='btnresmot'> <img src='https://img.icons8.com/material/24/ffffff/scooter--v1.png'/> <span> Réservation Moto </span> </button>"
                    +"</div>"
                +"</div>"



                //+ "<span class = 'type'> Type de parking : " + tab[i]["type"][0].toUpperCase() + tab[i]["type"].slice(1) + "</span> <br>"
                 );  
        }

            //modalplus

            const modalplus = document.getElementById("modalplus");

            const plus = document.getElementById("plus");

            const close = document.getElementsByClassName("close")[0];

            // When the user clicks the button, open the modal
            console.log(typeof plus);
            plus.onclick = function() {
            modalplus.style.display = "block";
            }

HTML : (I made sure that the script was called at the bottom of the page)

<body>
    <div id="map"></div>

    <div id="modalplus" class="modal">

        <div class="modal-content">
          <span class="close">&times;</span>
          <p>Some text in the Modal..</p>
        </div>
      
    </div>

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

I think this is what you're looking for: https://stackoverflow.com/a/30601663/5334486 — GrafiCode, May 26 '22 at 10:47
Duplicate IDs are as useful as duplicate car registration numbers. — Álvaro González, May 26 '22 at 10:52
@ÁlvaroGonzález that's absolutely true but I think OP's only displaying popups one at a time. Problem is, elements are created dynamically, so it's not possible to do this `const plus = document.getElementById("plus");` before the "plus" element is added to the dom. — GrafiCode, May 26 '22 at 10:57
@GrafiCode thanks for the help, that was i was searching for! I'm trying to accept the answer, i'm new to this haha — Alex Hinqo, May 26 '22 at 10:59

GetelementbyID() when the element is dynamically created by js

0 Answers0