JS works on some pages but not others... file exists in page source though

Question

I don't know much javascript so I'm pretty much copy-pasting. I'm making a website and there is a navigation sidebar. I have this script to toggle a class the sets display to none.

$(document).ready(function () {
  $("#sidebar-toggle").on("click", function () {
      $("aside.navigation").toggleClass("no-sidebar");
  });
});

I know the code works because it functions perfectly on a select few pages - views that happen to be defined in a specific Flask blueprint. Not on any other page.

I've checked that the structure doesn't change between pages (maybe I made a jinja template mistake) and it doesn't - all referenced elements exist and have the correct ids and classes. The javascript file containing the script above is loaded on every page and viewing it through the browser shows the correct code.

I'm hoping this can be resolved by a misunderstanding in how js files work and/or the syntax above. If anything other info would help, lmk.

Answer 1

Okay the non-functioning pages were throwing a type error that referenced some code for modals (that was also in main.js) above the sidebar code. The problem was solved by moving the sidebar code above the problematic code.

Now I need to figure out why a11y dialogs are throwing an error on some pages and not others...

Edit: Solved that too.

In my case base.js contained the following code:

var cast_crew_modal = document.getElementById('cast-crew-dialog')
var cast_crew_dialog = new A11yDialog(cast_crew_modal)

cast_crew_dialog.on('show', function (cast_crew_modal, cast_crew_trigger) {
  console.log(cast_crew_modal)
  console.log(cast_crew_trigger)
})

Great except the cast_crew_modal only exists in Flask views defined in the Production blueprint. On all other pages, that first variable gets set as none/null because it can't find #cast-crew-dialog. Hence why the original sidebar code only worked on production pages.