Issues with jquery intl-tel-input plugin. Why doesn't it see the embedded html element?

Question

JavaScript

I would be very grateful for any help!

I work with webpack, I connected the jquery intl-tel-input plugin to validate phone numbers.
The actual input code:

<div class="iti iti--allow-dropdown iti--separate-dial-code">
     <input class="form-control" type="number" id="phone" name="leyka_donor_phone" value="" autocomplete="off" data-intl-tel-input-id="0" placeholder="XXX XXX-XX-XX" style="padding-left: 77px;">

Insert built-in functions:

let inputPhone = document.querySelectorAll("input[name=leyka_donor_phone]");
    let iti_el = $('.iti.iti--allow-dropdown.iti--separate-dial-code');

    if(iti_el.length){
        iti.destroy();
        // Get the current number in the given format
    }
    for(let i = 0; i < inputPhone.length; i++){
        iti = intlTelInput(inputPhone[i], {
            autoHideDialCode: false,
            autoPlaceholder: "aggressive" ,
            initialCountry: "auto",
            separateDialCode: true,
            preferredCountries: ['ru','th'],
            customPlaceholder:function(selectedCountryPlaceholder,selectedCountryData){
                return ''+selectedCountryPlaceholder.replace(/[0-9]/g,'X');
            },
            geoIpLookup: function(callback) {
                $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
                  let countryCode = (resp && resp.country) ? resp.country : "";
                  callback(countryCode);
              });
            },
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.0/js/utils.js" // just for 
        });

        $('input[name="leyka_donor_phone"]').on("focus click countrychange", function(e, countryData) {

            let pl = $(this).attr('placeholder') + '';
            let res = pl.replace( /X/g ,'9');
            if(res != 'undefined'){
                $(this).inputmask(res, {placeholder: "X", clearMaskOnLostFocus: true});
            }
            
        });
       
        $('input[name="leyka_donor_phone"]').on("focusout", function(e, countryData) {
            let intlNumber = iti.getNumber();
            console.log(intlNumber);   
        });

And jquery throws an error:
jQuery.Deferred exception: iti is not defined ReferenceError: iti is not defined
at HTMLDocument

Browser error:
Uncaught ReferenceError: iti is not defined
at HTMLDocument

Although some part of the code is worked out

Thanks in advance!

Answer 1

Have you created the iti variable/object ? Check again!