leafletjs - How to access the html created inside the marker?

Question

Using leafletjs I created a series of markers on the map, all looping from a JavaScript array. I also added some html, including the "I'm here" button as per the screen. I would like to be able to access that button to create a series of events. My idea was to increase a number present in the paragraph again via JS.

How can I do?

Button on the popoup

luoghi.forEach(function (info) {
    let marker = L.marker([info.latitudine, info.longitudine], { icon: iconaPedone });
    let infoLuogo =
        `
    <div class="box-informazioni">
    <h3 class="nome-scheda">${info.nome}</h3>
    <p class="linea-p"></p>
    <p>Tipo: lxxuogo comune o circolo</p>
    <p>Aperto da: <strong>LUN-VEN ore 10-18</strong></p>
    <p class="giocatori-presenti">Giocatori presenti: <strong>10</strong></p>
    <div class="box-pulsanti">
    <a class="link-segnalazione" href="#">Sono qui</a>
    <a class="link-coordinate" href="https://www.google.com/maps/place/${info.latitudine},${info.longitudine}">Vai al luogo</a>
    </div>
    </div>

    `;

    
    let gpsLuogo = infoLuogo.toString();
    marker.bindPopup(gpsLuogo);
    marker.addTo(map);

});

Answer 1

Maybe this will help you, i can't comment as i don't have 50pts reputation.

You can add some data tags to the buttons. Like this:

<a class="link-segnalazione" data-lng="${info.longitudine}" data-lat="${info.latitudine}" href="#">Sono qui</a>

So, for example, you would be able to get those values with jquery like this:

$('.link-segnalazione').click(function(){
   // Log the location
   console.log($(this).data("lat"), $(this).data("lng"));
});

Also, consider adding all markers to a layer and after the loop, add a layer to a map. It's easier to manipulate with a single layer