debugging 正在尝试验证信用卡号,但显示TypeError

3b6akqbq  于 2022-11-14  发布在  其他
关注(0)|答案(1)|浏览(151)

我有一种感觉,我得到'TypeError:cardLogo.setAttribute不是函数'',因为我使用的是'document.getElementsByClassName'而不是'document.getElementsById'。这可能是我出错的原因,还是我遗漏了其他内容?
我想让它做的是,当一个数字输入,它验证卡类型(visa,mastercard等),但我不断得到这个错误。

var cardNumber = new Cleave('.card-number-input', {
    creditCard: true,
    delimiter: " ",
    onCreditCardTypeChanged: function (type) {
        const cardLogo = document.getElementsByClassName('front-logo'),
        visa = 'fa-brands fa-cc-visa';

        switch (type) {
            case "visa":
                cardLogo.setAttribute("class", visa);
                break;
        
            default: 
            cardLogo.setAttribute("class", ' ');
            break;
        }
    }
});
eimct9ow

eimct9ow1#

错误的原因是因为getElementsByClassName()是对象的返回数组,而不是对象。所以最好的解决方案是你可以尝试这些代码

var cardNumber = new Cleave('.card-number-input', {
    creditCard: true,
    delimiter: " ",
    onCreditCardTypeChanged: function (type) {
        const cardLogo = document.getElementsByClassName('front-logo'),
        visa = 'fa-brands fa-cc-visa';

        switch (type) {
            case "visa":
                cardLogo[0].setAttribute("class", visa);
                break;
        
            default: 
            cardLogo[0].setAttribute("class", ' ');
            break;
        }
    }
});

你也可以使用foreach,如果你想的话。但是对于这个快速的解决方案,在cardLogo的前面加上[0]就足够了。

相关问题