javascript - 按 ID 获取元素不起作用

问题描述

我有一个由 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）只合并在一个字段中。加载页面时，它会创建另一个input没有 id 属性的页面，如下所示：

任何想法如何onblur在这个 MM/YY 字段上实现？

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

谢谢！

编辑：我不知道我是否无法获得查询选择器，因为input class='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.
            }
        });
    }

标签： javascript

请注意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 事件侦听器

javascript - 按 ID 获取元素不起作用 | JavaScript

问题描述

解决方案

推荐阅读