title: Toggeling Mapbox GL JS layers with document.getElementByID() not working
body: <p>I'm trying to get a layer control component working in mapbox. I read the tutorial <a href="https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/" rel="nofollow noreferrer">here</a> on mapbox explaining how to get a layer toggle. However, in the tutorial, it also creates buttons which I don't need because I'm calling <code>document.getElementByID</code> since I already created a <code>div</code> with all the layers in HTML. </p>
  
  <p>The problem is when I click the link in my div nothing happens and I'm not receiving any errors in the web console so I'm not sure where to go from here. Any help would be greatly appreciated. </p>
  
  <p><strong>mapbox gl:</strong></p>
  
  <pre><code>map.on('load', function() {
      // layer - rail road
      map.addLayer({
          'id': 'Railroad',
          'type': 'line',
          'source': {
              'type': 'geojson',
              'data': geojson_railRoad,
              },
          'layout': {
              'visibility': 'visible'
          }
      });
      var tracks_layer = document.getElementById("tracks");
  
      tracks_layer.onclick = function(){
      var visibility = map.getLayoutProperty('Railroad', 'visibility');
  
      if (visibility === 'visible'){
          map.setLayoutProperty('Railroad', 'visibility', 'none');
      } else {
          map.setLayoutProperty('Railroad', 'visibility', 'visible')
      }
  };
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;div class="legend-body" id="legend"&gt;
                  &lt;b&gt;Railroad Layers&lt;/b&gt;
                  &lt;div class='train-layer-options'&gt;
                      &lt;div class="layer-line tracks" id="tracks"&gt;&lt;/div&gt;
                      &lt;a href=# class="layer-text" id="tracks"&gt;Tracks&lt;br&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>