switch custom button control on leaflet js

i want to make switch custom button with L.control.extend on leaflet js
when on: it will show crosshair.png at center viewport(map), so people can hover on the right position.
when off (okay): get the center coordinate
but i only got example with just 1 click, can anybody help me

here is the code to get the coordinate

const centerMarker = L.marker(mymap.getCenter());
          centerMarker.addTo(mymap);

const createButton = (text, onclick) => {
              const button = document.createElement('button');
              button.setAttribute('type', 'button');
              button.appendChild(document.createTextNode(text));
              L.DomEvent.on(button, 'click', onclick);
              return button;
          };

const getButton = createButton('mark a location', (ev) => {
              centerMarker.setLatLng(mymap.getCenter());
          });

 L.Control.LatLonControl = L.Control.extend({
              onAdd: (mymap) => {
                  const latLonContainer = document.createElement('div');
                  latLonContainer.classList.add('lat-lng', 'custom-control', 'leafletjs');
                  const lat = latLonContainer.appendChild(document.createElement('span'));
                  const lng = latLonContainer.appendChild(document.createElement('span'));
                  latLonContainer.appendChild(getButton);

                  return latLonContainer;
              },
              onRemove: (mymap) => {
                  L.DomEvent.off(getButton, 'click', getButtonOnClick);
              }
          });


          L.Control.latLonControl = function(opts) {
              return new L.Control.LatLonControl(opts);
          };
          
          L.Control.latLonControl({ position: 'topleft' }).addTo(mymap);