Question

我正在尝试隐藏/显示表单上的按钮，具体取决于信用卡验证是否返回true。如果它是真的，他们可以点击结账，否则他们不能。

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

我已经确认，当我输入正确的信用卡号码时，我们会进入if语句。控制台将显示“我们已输入if语句”。但是，结帐按钮将不会在页面上显示。

我想知道是否甚至可以在javascript中执行此类操作？谢谢你的帮助！

Answer 1

从

改变

document.getElementById("checkoutButton").style.dislay = 'block';

到

document.getElementById("checkoutButton").style.display = 'block';

Answer 2

您的错误往往是JavaScript代码中的典型语法错误。

在JS代码中，Error被定义为TYPO Error。因此，通过纠正拼写错误，您可以使隐藏/显示功能正常工作。

您在JavaScript中使用了Style display Property。

简要说明： - display属性设置或返回元素的显示类型。

HTML中的元素主要是＆＃34;内联＆＃34;或＆＃34;阻止＆＃34; elements：内联元素的左侧和右侧有浮动内容。块元素填充整行，左侧或右侧不显示任何内容。

display属性还允许作者显示或隐藏元素。它类似于visibility属性。但是，如果设置display：none，它会隐藏整个元素，而visibility：hidden表示元素的内容将不可见，但元素保持原始位置和大小。

<强>语法：

 document.getElementById("myDIV").style.display = "none";

解决方案

替换此代码，因为它有拼写错误：

document.getElementById("checkoutButton").style.dislay = 'block';

使用：

document.getElementById("checkoutButton").style.display = "block";

Answer 3

只需用以下代码替换您的代码：

            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';
            }

就是这样，享受编码：）

Javascript隐藏/显示按钮

3 个答案:

解决方案