I have a map -

 var sites = [
{
    "lat": 38.608491,
    "lng": -90.156654,
    "area": "South End Sites (South of Broadway, west of and including 10th)",
    "intersection": "",
    "address": "1535 Tudor Avenue",
    "notes": "True Light Baptist Church",
    "description": "The bell of this church rang as both warning and call to arms in 1917. The violence that erupted on July 2 was long-simmering. For months ahead of time, the African American community prepared for the possibility of violence, and part of that preparation was the use of church bells as a warning that trouble was imminent. Whites harassed the South End neighborhood regularly over that summer. On the night of July 1, a carload of assailants drove along Market Street while firing shots into homes. The church bell rang out, calling the community to defend itself. Armed African Americans came into the streets to defend their neighborhood, and it was this particular response that was presented at trial as evidence that African Americans, not whites, started the conflict."
},
{
    "lat": 38.608857,
    "lng": -90.151939,
    "area": "South End Sites (South of Broadway, west of and including 10th)",
    "intersection": "",
    "address": "1700 Bond Avenue",
    "notes": "Leroy Bundy Home Site",
    "description": "Dr. Leroy Bundy was a leader of the African-American community in 1917. He lived near here at 1700 Bond Avenue. He stood trial for causing the riot and was found guilty on false testimony. He was sentenced to life in prison, but was exonerated by the Illinois Supreme Court."
}
];

// Latitude, longitude, Zoom Level
    var map = L.map('map__riot').setView([38.6245, -90.1506], 14);

    // TileLayer
    L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png', {
        attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        minZoom: 10,
        maxZoom: 16,
        ext: 'png'
    }).addTo(map);

    // Iterate over the markers and add them to the map
    for (var i = 0; i < sites.length; i   ) {
        marker = new L.marker([sites[i].lat, sites[i].lng])
        .bindPopup('<p >'  sites[i].address   '</p><p >'   sites[i].description   '</p>' )
        .addTo(map);

    }

I want the data to be displayed in this div when clicking on the marker

<div >
<p id="text_info"></p>
</div>

I looked at the documentation, but did not find anything in the Example. Please share how I can display data when clicking on a marker in my div

CodePudding user response：

When you create the Marker attach a listener for the click event.

for (const site of sites) {
        marker = new L.marker([site.lat, site.lng])
        .bindPopup('<p >'  site.address   '</p><p >'   site.description   '</p>' )
        .on('click', () => {
           document.getElementById('text_info').textContent = site.description 
        })
        .addTo(map);

    }