Show/Hide Fields using Javascript and Naming Conventions: Event Handler/Error

Hi There,

I'm working on a form that has fields that need to be hidden/shown based on another field selection. I used a naming convention for all the hidden/shown fields (begin with acpe_1A., acpe_1B, etc..). Instead of painstakingly putting each of these (and there are quite a few!) into a business rule, I'm guessing js could do this much more efficiently.

However, when I configure the event handler and web resource and attempt to use the form, I get an error that seems to indicate that the function in the web resource can't be found. 

Here's the code (admittedly I'm non-experienced with this!):

function showFieldsBasedOnSelection(executionContext) {
  var formContext = executionContext.getFormContext();
  var triggerField = formContext.getAttribute("acpe_cpelevel");
  var selectedValue = triggerField ? triggerField.getValue() : null;
  var controls = formContext.ui.controls.get();

  for (var i in controls) {
    var control = controls[i];
    var controlName = control.getName();
    
    if (selectedValue === "Level 1A" && controlName.startsWith("acpe_1A")) {
      control.setVisible(true);
    } else if (selectedValue === "Level 1B" && controlName.startsWith("acpe_1B")) {
      control.setVisible(true);
    } else if (selectedValue === "Level 2A" && controlName.startsWith("acpe_2A")) {
      control.setVisible(true);
    } else if (selectedValue === "Level 2B" && controlName.startsWith("acpe_2B")) {
      control.setVisible(true);
    } else if (controlName.startsWith("acpe_1A") || controlName.startsWith("acpe_1B") || controlName.startsWith("acpe_2A") || controlName.startsWith("acpe_2B")) {
      control.setVisible(false);
    }
  }
}

I'm sure I've goofed somewhere... any ideas from the hive mind?