Adding a clickable button to execute code within a LeafletJS marker!

Question

Adding a clickable button to execute code within a LeafletJS marker!

I'm currently experimenting with adding a button inside a pointer that will log a message to the console. This is simply a test to see if I can execute a method on the marker, but so far I haven't been able to display any text.

const marker = L.marker([latitude, longitude]).addTo(map);

const button = '<br/><button type="button">Click button</button>'
const clickbutton = document.querySelector("#click");
button1.addEventListener("click", function(event) {
    console.log('This button works!');
});
marker.bindPopup(button);

Upon loading the page, I encounter the following error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'addEventListener')

The error seems to be triggered by this line of code:

button1.addEventListener("click", function(event) {

I'm puzzled as to why it's returning null. Any assistance would be greatly appreciated!

javascript express button leaflet addeventlistener

Answer 1

Answer №1

You seem to be having trouble creating the button properly.

Here is a correct way to do it:

const myButton = document.createElement('button');

myButton.id = 'delete';
myButton.textContent = 'Delete item';

To add the button to your webpage, you'll need to identify the parent element and append the button to it as a child:

// Replace this id with the actual parent element id
const parentElementId = 'parent-element-id';

const parentElement = document.getElementById(parentElementId);
parentElement.appendChild(myButton);

After that, you can interact with the button as needed:

const marker = L.marker([latitude, longitude]).addTo(map);

myButton.addEventListener("click", function(event) {
    console.log('The button is functioning correctly!');
});

marker.bindPopup(myButton);

Here's an example of the final code:

const myButton = document.createElement('button');

myButton.id = 'delete';
myButton.textContent = 'Delete item';

// Replace this id with the actual parent element id
const parentElementId = 'parent-element-id';

const parentElement = document.getElementById(parentElementId);
parentElement.appendChild(myButton);

const marker = L.marker([latitude, longitude]).addTo(map);

myButton.addEventListener("click", function(event) {
    console.log('The button is functioning correctly!');
});

marker.bindPopup(myButton);

Learn more about createElement

Answer 2

You seem to be having trouble creating the button properly.

Here is a correct way to do it:

const myButton = document.createElement('button');

myButton.id = 'delete';
myButton.textContent = 'Delete item';

To add the button to your webpage, you'll need to identify the parent element and append the button to it as a child:

// Replace this id with the actual parent element id
const parentElementId = 'parent-element-id';

const parentElement = document.getElementById(parentElementId);
parentElement.appendChild(myButton);

After that, you can interact with the button as needed:

const marker = L.marker([latitude, longitude]).addTo(map);

myButton.addEventListener("click", function(event) {
    console.log('The button is functioning correctly!');
});

marker.bindPopup(myButton);

Here's an example of the final code:

const myButton = document.createElement('button');

myButton.id = 'delete';
myButton.textContent = 'Delete item';

// Replace this id with the actual parent element id
const parentElementId = 'parent-element-id';

const parentElement = document.getElementById(parentElementId);
parentElement.appendChild(myButton);

const marker = L.marker([latitude, longitude]).addTo(map);

myButton.addEventListener("click", function(event) {
    console.log('The button is functioning correctly!');
});

marker.bindPopup(myButton);

Learn more about createElement

Adding a clickable button to execute code within a LeafletJS marker!

Answer №1

Similar questions

The data type 'void' cannot be assigned to type '(event: MouseEvent<HTMLDivElement, MouseEvent>) => void'

How would you go about creating a VueJS component that displays a table with a set number of columns and automatically distributes the cells within them?

Error encountered when attempting to include a foreign key

Guidelines for submitting and displaying content on a single page with jQuery and MySQL

Encountering a User Agent error while trying to update Vue to the latest version using N

What is the method for revealing elements with a click?

How can I extract data from [Object object] in Node.js?

Error: Unable to access the 'offsetTop' property of null

"Discover the Step-by-Step Guide to Launching Fresh Content or Code in the Current Tab and

What is the best way to create a button with a dynamic background animation in React?

When viewing the material-ui Chip component at normal zoom, a border outlines the element, but this border disappears when zoomed in or out, regardless of

Adding additional rows to an Array Object in JavaScript based on a certain condition

Selenium webdriver cannot find the element within the JavaScript code

Extract the ID from the array, save it, and then delete it from the local storage

Components undergo a style transformation with Material UI

Reset the jQuery star-rating plugin

Transitioning JavaScript plugins to Vue framework

Encountered an issue with the Mongoose Schema method: The model method is not recognized as a

Are you looking for a way to prevent the default behavior of an event in angular-ui-router 1.0.x? Check out

What is the best way to incorporate a JavaScript function into an Angular 2 template?