Mapbox - checkbox filters work in modal but not div

Question

In my first map (https://codepen.io/flyinginsect2/pen/oNoQvNQ), the checkbox filters in the modal popup seem to work just fine. However, when I move the filters to a new div (https://codepen.io/flyinginsect2/pen/QWOJqRq), they stop working. The HTML checkboxes and Javascript event listeners haven't changed. The only thing that has changed is moving the boxes from one div to another. I thought maybe it had to do with the z-indexes (but they're the same in each) or the position value (but changing that doesn't fix it). In a previous question, someone told me to use my browser's debugger, but I'm fairly inexperienced and couldn't figure it out using that.

I also realized that when I move it to a new div, the geocoder search box disappears as well.

Modal div checkboxes:

  <div id="myModal" class="modal">

    <div class="modal-content">
      <span class="close">&times;</span>
      <h3>Project Categories</h3>

      <input type="checkbox" id="srBox" name="srBox" value="SustainableRecreation">
      <label for="srBox"> Sustainable Recreation</label><br>

      <input type="checkbox" id="hlBox" name="hlBox" value="HealthyLandscapes">
      <label for="hlBox"> Healthy Landscapes</label><br>

      <input type="checkbox" id="ovBox" name="ovBox" value="Overnight">
      <label for="ovBox"> Overnight</label><br>

    </div>

  </div>

Modal div CSS:

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 13%;
  font-family: 'DM Sans', sans-serif;
  background-color: white;
}

New div checkboxes CSS:

#filterMenu {
    position: absolute;
    font-size: 15px;
    display: block;
    margin: 0;
    padding: 10px;
    font-family: 'DM Sans', sans-serif;
    background: #ffffff;
    z-index: 1;
    top: 10px;
    left: 10px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.4);
}

New div checkboxes HTML:

  <div id="filterMenu">

    <h3>Project Categories</h3>

    <input type="checkbox" id="srBox" name="srBox" value="SustainableRecreation">
    <label for="srBox"> Sustainable Recreation</label><br>

    <input type="checkbox" id="hlBox" name="hlBox" value="HealthyLandscapes">
    <label for="hlBox"> Healthy Landscapes</label><br>

    <input type="checkbox" id="ovBox" name="ovBox" value="Overnight">
    <label for="ovBox"> Overnight</label><br>

  </div>

Event listeneners:

var filters = {};

function updateFilters() {
  var compositeFilter = ['all'];
  for (let filterValue in filters) {
    if (filters[filterValue]) {
      compositeFilter.push(['==', ['get', filterValue], 'Y']);
    }
  }
  if (compositeFilter.length > 1)
    map.setFilter('rfovProjects', compositeFilter);
  else {
    map.setFilter('rfovProjects', null);
  }
}

var checkbox = document.getElementById('srBox');
checkbox.addEventListener('change', function() {
  filters['SR'] = this.checked;
  updateFilters();
});

var checkbox = document.getElementById('hlBox');
checkbox.addEventListener('change', function() {
  filters['HL'] = this.checked;
  updateFilters();
});

var checkbox = document.getElementById('ovBox');
checkbox.addEventListener('change', function() {
  filters['OV'] = this.checked;
  updateFilters();
});

Answer 1

Top tip - ctrl+shift+j will open a Javascript console in most browsers and you can see the error messages there.

In your case the error is

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at pen.js?key=pen.js-92a075c2-c73e-b8a2-13a2-659cf714a2a0:110:8

This suggests that something is missing in your code. It is also the reason why some other elements disappear - basically because your code throws an uncaught error and crashes without executing beyond that point. If you scroll through your code in the codepenio window you link, you will notices as you scroll down the JS pane there is a tiny red exclamation mark. Click that and it takes you to the line that threw the error. This line is referring to a 'topoRadio' element that is present in the modal example but has been deleted from the HTML of the non-modal example.

In your code at line 109:

var tRadio = document.getElementById('topoRadio');

The value of tRadio will be null because that element has been deleted. It fails here but the next block will also fail because iRadio has also been deleted. You need to either put those buttons back in the HTML or remove references to them in the JS.

As a quick test I cut and pasted the idStyleMenu div from the modal example into the 'plain' example and everything works. You'll need to adjust your layout of boxes to see both, but that proves it's the missing HTML causing the problem.