Working on my NestJS project, I am still a beginner in the field. My current task involves creating a web application that displays a leaflet map with clickable tiles. Each tile should have a button that triggers a specific function when clicked. However, I seem to be facing issues with using the <button> tags and getting the onclick functionality to work properly. Is there an alternative approach to achieve this? Your insights are much appreciated!
Here is a snippet of my code:
const onEachSurface = (surface, layer) => {
const textOnPopup =
surface.properties.kachel + // This shows the number of the selected tile
' ' +
`<button onclick = "addToCart()"
class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border-gray-400 rounded shadow"
>Add to cart</button>
<script type="text/javascript">
function addToCart() {
console.log('hello my old friend');
}
</script>`;
layer.bindPopup(textOnPopup);
};
The frontend view currently appears as shown in this screenshot.
Upon clicking a tile, the popup displaying the tile number appears correctly. However, the button fails to execute the designated function due to NextJs being unaware of it. The numeric value alongside the button corresponds to "surface.properties.kachel" in the code (which loads data from a background JSON file).