Plugin field-type not getting javascript variable? Updating a plugin from Craft 2 to Craft 3, so this logic used to work.

The plugin has a field-type which is a button. When clicked, the button does stuff depending upon another field. That handle(ID) of that other field must be passed to the button's javascript.

The field's class seems to register the js correctly. When the page loads, it gives a popup with the correct info.

var startDateFieldHandle = 'fields-startDate';
alert( 'startDateFieldHandle = '+startDateFieldHandle);


Above that is
&lt;script src="http://f.dev/cpresources/6991e452/occurrencesField.js?v=1527142206"&gt;&lt;/script&gt;
which pulls in the following:

jQuery(document).ready(function(){
    $("#fields-cal37_choose_dates_button").click( function() { 
        alert('Clicked the button');
...
        var start_date = new Date( jQuery("#"+startDateFieldHandle).val() );


The alerts happen in the correct sequence, but nevertheless my guess is that because &lt;script cpresources&gt; bit occurs earlier on the page than where startDateFieldHandle is set, that somehow it still isn't set when the button is clicked.

I don't see, using Craft::$app-&gt;View-&gt;registerJs($js); that there is any way to say "put this first."  

It did used to work under Craft 2. Any tips? 

Update
At present, I'm seeing in occurrencesField.js that as soon as I reference the startDateFieldHandle variable in any way, such as alert(startDateFieldHandle); the script quits.

Also, in the Firefox console, I'm getting:

jQuery.Deferred exception: startDateFieldHandle is not defined @http://f.test/cpresources/6d6f7137/occurrencesField.js?v=1527518592:101:2
l/&lt;/e@http://f.test/cpresources/61c13c0c/jquery.js?v=1527049453:1:29794
l/&lt;/t&lt;@http://f.test/cpresources/61c13c0c/jquery.js?v=1527049453:1:30109
 undefined  jquery.js:1:31365
Double-instantiating a menu button on an element garnish.js:1:2512
Keep in mind Craft parses the html of your field, it won't be used directly, thus the ID of your field can't be "#"+startDateFieldHandleunless you ignored Crafts methods or modified it in another way. Your fields ID will be more like

id="fields-{{the id you specified}}"


Thus you should make sure you used the correct selector like

jQuery("#fields-"+startDateFieldHandle)


usually your order should be fine.. If you want to pass certain variables to Javascript you should do that in Twig because Craft::$app-&gt;View-&gt;registerJs($js); won't pass variables in a global scope (you can't access them in your JS files in certain cases).

However you should avoid using those globals in Craft. It's better to create a custom Garnish object for the logic

Craft::$app-&gt;getView()-&gt;registerJs('new Garnish.MyAwesomeField(id, options)');


That will make sure everything is initialized and ready to use
Your js could look like this

Garnish.MyAwesomeField = Garnish.Base.extend(
    {
        $theOtherField: null,
        $field: null,
        options: {},
        init: function (fieldId, settings) {
            this.options = $.extend({}, Garnish.MyAwesomeField.defaults, settings);
            this.$theOtherField = $('#' + this.options.fieldSelector + this.options.theOtherFieldHandle);
            this.$field = $('#' + this.options.fieldSelector + fieldId);
            this.addListener(this.$field, 'click', $.proxy(this, 'clickEvent'));
        },
        clickEvent: function(){
            alert( this.$theOtherField.val() );

        }
    },
    {
        defaults:{
            fieldSelector: 'fields-',
            otherFieldHandle: ''
        }
    }
);