Best place to add custom javaScripts inside my Enterprise wiki page layout

Question

I want to add a javascript to my Enterprise wiki page layout. the javascript will fire when users change the options for some site columns, which i have added to my enterprisewiki.aspx page layout to implement a cascading lists. the javascript looks as follow:-

<script type="text/javascript">
function getCurrentMainCategoryID(){
var currentMainCatId = 0;
var customer = document.getElementById("ctl00_PlaceHolderMain_ctl06_DropDownChoice");
var selectobject = document.getElementById("ctl00_PlaceHolderMain_ctl07_DropDownChoice");

    $.ajax({
     url: url,
     method: "GET",
     async: false,
     headers: { "Accept": "application/json; odata=verbose" },
     success: function (data) {
        if(data.d.results.length>0){
            //code goes here

    $.ajax({
     url: url2,
     method: "GET",
     async: false,
     headers: { "Accept": "application/json; odata=verbose" },
     success: function (data2) {
            //code goes here
        
     },
     error: function (data) {
     alert("Error");}
            });
                                    }
                                },
     error: function (data) {
     alert("Error");
     }
    });
    return results;}

$("#ctl00_PlaceHolderMain_ctl06_DropDownChoice").change(function() {
getCurrentMainCategoryID();                         
});
getCurrentMainCategoryID(); 

</script>   

now this script allowed me to implement a cascade effect between two choices site columns inside my page layout. but i have these questions on my above appraoch:-

1. I have placed this javaScript just before closing the </asp:Content> inside my enterprisewiki.aspx page layout,, so is this the right place to add such as script ?

2. I did not find a way to add the JavaScript selectors, rather than manually hard-coding the fields non-friendly ids which are ctl00_PlaceHolderMain_ctl06_DropDownChoice & ctl00_PlaceHolderMain_ctl07_DropDownChoice.. so could these ids change in the future for a reason or another (like applying a cumulative updates or add additional columns inside the page layout or add additional columns to the enterprise wiki content type)?i though i will be dealing with the site columns internal names,, but seems my page layout will not render the columns internal names and instead it will create non-user friendly ids ?

can anyone advice on my above 2 points please?

here is the markup for the 2 select lists:-

Thanks

Answer 1

For current development against SharePoint, I put my code inside of a text file and load that into SiteAssets. Then, I add in a CEWP and load the text file. This way I can make changes to the text file and let it affect anywhere my code lives. This also gives me the added bonus that if my code breaks something, I can just fix it in the file and not have to worry about editing something on the page.

With respect to your code, change your selectors to something as such:

document.querySelector("select[title='MainCategory Required Field']")
document.querySelector("select[title='SubCategory Required Field']")

It's better to use something like this over the generated SharePoint Ids. Just run these selectors in the browser to validate they return valid HTML.

You'll also want to look into Script-On-Demand as well.