Adding buttons inside Leaflet popup

Question

I got a problem when I try to add buttons inside a Leaflet popup. The popup is generated when you click on the map.

Ideally I want to popuo to show 2 buttons:

<

Answer 1

You should be using innerHTML to add buttons to your leaflet as below

defineYourWaypointOnClick(e: any) {

var choicePopUp = L.popup();
var container = L.DomUtil.create('div');
//////////////////////////////////////////////////////////////////////////////////////////////
///////////modified here
startBtn = this.createButton('Start from this location', container),
destBtn = this.createButton('Go to this location', container);
div.innerHTML = ''+startBtn+ '    ' + destBtn ; 
//////////////////////////////////////////////////////////////////////////////////////////////

choicePopUp
  .setLatLng(e.latlng)
  .setContent('You clicked the map at ' + e.latlng.toString() + '<br>' + startBtn)
  .openOn(this.map);

L.DomEvent.on(startBtn, 'click', () => {
  alert("toto");
});

L.DomEvent.on(destBtn, 'click', () => {
  alert("tata");
});
}

createButton(label: string, container: any) {
var btn = L.DomUtil.create('button', '', container);
btn.setAttribute('type', 'button');
btn.innerHTML = label;
return btn;
}