Javascript隐藏/显示按钮


Javascript hide/show button

我试图隐藏/显示我的表单上的按钮取决于信用卡验证是否返回true。所以如果它是真的,他们可以点击checkout,否则他们不能。

<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语句"。但是,checkout按钮将不会在页面上显示。

我想知道是否有可能在javascript中做这样的事情?谢谢你的帮助!

用下面的代码替换你的代码:

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

就是这样,享受编程吧:)

修改

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

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

出现了JavaScript代码中典型的语法错误。

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

你已经在JavaScript中使用了Style display Property

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

HTML中的元素大多是"inline"或"block"元素:内联元素的左右两侧都有浮动内容。块元素填满整行,左边或右边不能显示任何内容。

display属性还允许作者显示或隐藏元素。它类似于可视性属性。然而,如果你设置了display:none,它将隐藏整个元素,而visibility:hidden则意味着元素的内容将不可见,但元素将保持其原始位置和大小。

语法:

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

解决方案

替换这段代码,因为它有打字错误:

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

:

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