Get Element By Id not working | JavaScript

Question

I have a simple checkout form powered by CardJs but the field MM/YY is not working when the onblur is being called:

My js code:

    var elCard = document.getElementById("number-cc");
    var elMonth = document.getElementById("month-cc");
    var elYear = document.getElementById("year-cc");
    var elCvc = document.getElementById("cvc-cc");
    elCard.onblur = createToken;
    elMonth.onblur = createToken;
    elYear.onblur = createToken;
    elCvc.onblur = createToken;

My html code:

                          <div class="card-js" data-icon-colour="#158CBA">
                           <input class="card-number form-control"
                                  name="my-custom-form-field__card-number"
                                  placeholder="Número do cartão"
                                  autocomplete="off"
                                  id="number-cc"
                                  required>
                           <input class="name" id="name-cc" name="name"
                                  placeholder="Nome impresso no cartão"
                                  required>
                           <input class="expiry-month" placeholder="MM" id="month-cc" required>
                           <input class="expiry-year" placeholder="AA" id="year-cc" required>
                           <input class="cvc" id="cvc-cc" required>

                        </div>

The others form fields ( number-cc and cvc-cc ) are working correctly. I'm wondering if the error is cause because this input (MM/YY) is merged in only one field. When the page is loaded it creates another input with no id attribute, as shown below:

Any ideia how can I achieve onblur on this MM/YY field?

CardJs: https://github.com/CardJs/CardJs/blob/master/examples/02_customise-fields.html

Thank you!

EDIT: I don't know if I can't get the query selector because there are some others class 'expiry' above the input class='expiry' as mentioned before. Here is the complete code loaded on the page:

EDIT 2:

Posting the full js code:

    PagSeguroDirectPayment.setSessionId(session_id);
    console.log(session_id);

    var elName = document.getElementById("name-cc");
    elName.onblur = createHash;

    console.log(document.querySelector('input.expiry'));
    document.querySelector('input.expiry').onblur = console.log('Hello');

    var flag;

    function createHash() {
        PagSeguroDirectPayment.onSenderHashReady(function(response){
            if(response.status == 'error') {
                console.log(response.message);
                return false;
            }
            var hash = response.senderHash; //Hash estará disponível nesta variável.
            var elToken = document.getElementById("hash");
            elToken.setAttribute("value", hash);
        });
    }

    var elCard = document.getElementById("number-cc");
    var elMonth = document.getElementById("month-cc");
    var elYear = document.getElementById("year-cc");
    var elExpiry = document.querySelector('input.expiry');
    var elCvc = document.getElementById("cvc-cc");

    elCard.onblur = createToken;
    elExpiry.onblur = createToken;
    elCvc.onblur = createToken;

    function createToken() {

        var sixDig = elCard.value.substring(0,7).replace(/\s+/g, '');

        PagSeguroDirectPayment.getBrand({
            cardBin: sixDig,
            success: function(response) {
             flag = response.brand.name;
            },
            error: function(response) {
              console.log(response);
            },
            complete: function(response) {
              console.log(response);
            }
        });

            console.log('Card #: ' + elCard.value);
            console.log('Mês: ' + elMonth.value);
            console.log('Ano: ' + elYear.value);
            console.log('CVC: ' + elCvc.value);
            console.log('Bandeira: ' + flag);
            console.log("Expiry: " + elExpiry.value);


        PagSeguroDirectPayment.createCardToken({
            cardNumber: elCard.value.replace(/ /g,''), // Número do cartão de crédito
            brand: flag, // Bandeira do cartão
            cvv: elCvc.value, // CVV do cartão
            expirationMonth: elMonth.value, // Mês da expiração do cartão
            expirationYear: 20 + elYear.value, // Ano da expiração do cartão, é necessário os 4 dígitos.

            success: function(response) {
                var token = response.card.token;
                console.log('Token do cartão: ' + token);
                var elToken = document.getElementById("token");
                elToken.setAttribute("value", token);
            },
            error: function(response) {
                console.log(response);
                // Callback para chamadas que falharam.
            },
            complete: function(response) {
                console.log(response);
                // Callback para todas chamadas.
            }
        });
    }

Answer 1

Notice how input#month-cc and input#year-cc have type="hidden" , so they're not visible in the browser.

What you actually want to target for the onblur is:

const expiry = document.querySelector('input.expiry')
expiry.onblur = createToken

EDIT:

If there are other elements that can be targeted with input.expiry then you have be more specific to make sure you're targeting the right one.

You can try: document.querySelector('.expiry-container .expiry-wrapper div input.expiry')

If that still doesn't work, you can use document.querySelectorAll , and figure out which index your target input is, and add an onblur event listener to that