javascript - Adding a button to the popup in Mapboxgl.js

Question

How to add a button to the popup and add an onClick to the function?

.setPopup(new mapboxgl.Popup({ offset: 25 })
.setHTML('<button onclick=' + { this.handlePop } + '> Button</button>'))
.addTo(map);

It does not work.

Answer 1

The way I solved the problem was to use setDOMContent instead of setHTML .

This way you can easily manipulate what happens with each element like so

const name = 'abc';
const innerHtmlContent = `<div style="min-width: 600px;font-size: large;color : black;">
            <h4 class="h4Class">${name} </h4> </div>`;

const divElement = document.createElement('div');
const assignBtn = document.createElement('div');
assignBtn.innerHTML = `<button class="btn btn-success btn-simple text-white" > Assign</button>`;
divElement.innerHTML = innerHtmlContent;
divElement.appendChild(assignBtn);
// btn.className = 'btn';
assignBtn.addEventListener('click', (e) => {
  console.log('Button clicked' + name);
});

const popup = new mapboxgl.Popup({
    offset: 25
  })
  .setDOMContent(divElement);