leaflet multiple layers control

Question

I am using leaflet to build a layer control with three layers all of them shouldn't be on the map simultaneously. A layer should only appear on the map with a click. the code below doesn't work

   var attractionnyc = L.layerGroup();
   var museumsnyc = L.layerGroup();
   var hotelsnyc = L.layerGroup();

    L.control.layers ({}, {
         'Attraction': attractionnyc,
    },  {
        collapsed: False,
    }).addTo(map);

      L.control.layers ({}, {
         'Museum': museumsnyc,
    },  {
        collapsed: False,
    }).addTo(map);

        L.control.layers ({}, {
         'Hotels': hotelsnyc,
    },  {
        collapsed: False,
    }).addTo(map);

Answer 1

When you do .addTo(map) you are adding it to the map. You need to do some sort of click event, you can set your layer as a variable like attraction and do something like attraction.addEventListener("click", function(){attraction.addTo(map)});