Javascript隐藏/显示按钮[关闭]

Question

I'm trying to hide/show a button on my form depending on whether the credit card validation returns true. So they can click checkout if it is true, and otherwise they cannot.

<script>
    $(function test() {

        $('#cardNo').validateCreditCard(function (result) {

            $('.log').html('Card type: ' + (result.card_type == null ? '-' : result.card_type.name)
                    + '<br>Valid: ' + result.valid
                    + '<br>Length valid: ' + result.length_valid
                    + '<br>Luhn valid: ' + result.luhn_valid);
            console.log(result.valid);
            console.log(result.length_valid);
            console.log(result.luhn_valid);
            if (result.valid == true && result.length_valid == true && result.luhn_valid == true) {
                console.log('we have entered the if statement');
                document.getElementById("checkoutButton").style.dislay = 'block';
            }
            else {
                console.log('we are not in the if statement');
                document.getElementById("checkoutButton").style.display = 'none';
            }
        });
    });
</script>

I have verified that when I enter a correct credit card number, we do go into the if statement. The console will read 'we have entered the if statement'. However, the checkout button will not become visible on the page.

I am wondering if it is even possible to do something like this in javascript? Thanks for the help!

Answer 1

just replace your code with this one:

            if (result.valid == true && result.length_valid == true && result.luhn_valid == true) {
                console.log('we have entered the if statement');
                document.getElementById("checkoutButton").style.display = 'block';
            }
            else {
                console.log('we are not in the if statement');
                document.getElementById("checkoutButton").style.display = 'none';
            }

That's it, Enjoy coding :)