Question

我在输入上实现了click事件：复选框。在addEventListener方法中我有一个if-else块。由于javascript有only function and global scope,而不是if-else阻塞范围。如果块应该是可访问的，则在内部声明一个变量在其他地方也阻止了。但是这里变量"all_disabled"在其他条件中导致错误。它说"cant read property length of undefined"

根据我的理解： all_disabled应该悬挂在功能范围的顶部（现在未定义）。首先点击复选框（选中它）它应该因此，当它转到其他地方（取消选中）时，它不应该是未定义的

为什么它会像这样？或者我对JS中的作用域有任何误解吗？

document.getElementById('show_hidden').addEventListener('click',function(event){

        if(this.checked){
            $('#hidden_image').show("slow");
            var all_disabled=document.getElementsByClassName('all_disabled');
            for(i=0;i<all_disabled.length;i++){

                if(all_disabled[i].disabled==true){

                    all_disabled[i].disabled=false;

                }
            }

        }else{
            $('#hidden_image').hide();
            for(i=0;i<all_disabled.length;i++){

                all_disabled[i].disabled=true; // error is here 

            }
        }
});

Answer 1

当决定进入else分支时，all_disabled变量未定义。为什么？因为定义它的唯一地方是在另一个分支内。

尝试将其定义移到if..else

之外

document.getElementById('show_hidden').addEventListener('click',function(event){

        var all_disabled=document.getElementsByClassName('all_disabled');

        if(this.checked){
            $('#hidden_image').show("slow");

            for(i=0;i<all_disabled.length;i++){

                if(all_disabled[i].disabled==true){

                    all_disabled[i].disabled=false;

                }
            }

        }else{
            $('#hidden_image').hide();
            for(i=0;i<all_disabled.length;i++){

                all_disabled[i].disabled=true;

            }
        }
});

Answer 2

我认为你有正确的范围概念但错误的Javascript概念，为此工作代码必须至少执行一次。由于它在其整个生命周期中从未运行过，因此变量引用仍未定义。这就是您收到这些错误消息的原因。可以这么说，在两个人之间的正常交谈中，A人开始谈论“Ankle Tap”（橄榄球防守方法），B人不知道“Ankle Tap”是什么，因为他从来没有之前看过或玩过橄榄球。因为它没有立即被人A定义。 B人似乎觉得很奇怪。

在这种情况下，根据else语句引用的all_disabled的引用未定义，但是根据if语句定义得很好。我希望这可以解决你的困惑。

Answer 3

R上。 Schifini的回答很好地解释了代码中的问题。我只是想提一下其他的东西。

由于您在代码的一部分中使用了jQuery，因此您也可以使用jQuery来实现所有 DOM操作。这将简化您的代码：

$('#show_hidden').on( 'click', function() {
    if( this.checked ) {
        $('#hidden_image').show( 'slow' );
    } else {
        $('#hidden_image').hide();
    }
    $('.all_disabled').prop( 'disabled', ! this.checked );
});

没有变量也没有循环！更少的代码意味着更少出错。

在javascript中if else块中声明的变量的范围和提升

3 个答案: