按 ID 獲取元素不起作用 | JavaScript

Question

我有一個由 CardJs 提供支持的簡單結帳表格，但是在調用 onblur 時，MM/YY 字段不起作用：

我的js代碼：

    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;

我的html代碼：

                          <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>

其他表單字段（ number-cc和cvc-cc ）工作正常。 我想知道錯誤是否是因為此輸入 (MM/YY) 僅合並在一個字段中。 當頁面加載時，它會創建另一個沒有 id 屬性的input ，如下所示：

任何想法如何在這個 MM/YY 字段上實現onblur ？

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

謝謝！

編輯：我不知道我是否無法獲得查詢選擇器，因為如前所述， input class='expiry'上方還有一些其他類 'expiry'。 這是頁面上加載的完整代碼：

編輯2：

發布完整的js代碼：

    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

請注意input#month-cc和input#year-cc 如何具有type="hidden" ，因此它們在瀏覽器中不可見。

你真正想要針對onblur 的目標是：

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

編輯：

如果還有其他元素可以使用input.expiry定位，那么您必須更加具體以確保定位正確的元素。

你可以試試： document.querySelector('.expiry-container .expiry-wrapper div input.expiry')

如果這仍然不起作用，您可以使用document.querySelectorAll ，並找出您的目標輸入是哪個索引，並為其添加一個 onblur 事件偵聽器