I have a small Django project. I have a JS script in the HTML file for one of my apps:

<script type="text/javascript">
    function intervalSelector() {
        let intervalField = document.getElementById("intervalField");
        let hourField = document.getElementById("hourField");
        let minuteField = document.getElementById("minuteField");

        intervalField.addEventListener("change", function () {

            if (intervalField.value === "Hourly") {
                hourField.disabled = true;
                minuteField.disabled = false;
            } else {
                hourField.disabled = false;
                minuteField.disabled = false;
            }
        });
    }
</script>

This function is called by a button element further down in the HTML document:

<button style="background-color: orange; color: white; float:left; margin-right:5px;"
        class="btn" type="button"
        onclick="intervalSelector()"
        data-bs-toggle="collapse"
        data-bs-target="#collapseWidthExample" aria-expanded="false"
        aria-controls="collapseWidthExample">
        Schedule
</button>

The function gets three elements by their Id in the HTML document:

<select class="form-select form-select-lg mb-3"
        aria-label=".form-select-lg example" id="intervalField">
        <option selected>Interval</option>
        <option value="1">Daily</option>
        <option value="2">Hourly</option>
</select>

<input name="hour" class="form-control" type="number" min="0" max="23" value="23" id="hourField">
<input name="minute" class="form-control" type="number" min="0" max="59" value="57" id="minuteField">  

When I run my webapp, and click the button that calls the function, it says that the intervalSelector function is not defined. Any ideas on what the problem could be?