未捕获的TypeError：无法设置null.active

Question

这是一个登录按钮和一个表单，它们都包含在一个id mainButton框中，但每个框都有不同的z-index。点击signIn-btn后，表单会显示出来。但是我发现一个问题，当它单击按钮时它不起作用，并且chrome Dev Tools显示

  

未捕获的TypeError：无法设置null'

的属性'className'

我的javascript openForm()似乎有问题。

var button = document.getElementById('mainButton');

var openForm=function() {
    button.className = "active";
};
var checkInput = function(input) {
    if (input.value.length > 0) {
        input.className = "active";
    } else {
        input.className = "";
    }
};

#mainButton .active {
     box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
#mainButton .active .signIn-form {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}

<div id="mainButton">
    <div class="signIn-btn" onclick="openForm();">
        Sign In
    </div>
    <div class="signIn-form">
        <div class="close-btn" onclick="closeForm()">
            ✘
        </div>
        <div class="form-title">
            Sign In
        </div>
        <div class="formInput-group">
            <input type="text" id="name" onblur="checkInput(this)">
            <label for="name">Username</label>
        </div>
        <div class="formInput-group">
            <input type="password" id="password" onblur="checkInput(this)">
            <label for="password">Username</label>
        </div>
        <div class="form-btn">
            Go
        </div>
    </div>

Answer 1

CSS选择器中有额外的空间。它应该是：

#mainButton.active {
     box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
#mainButton.active .signIn-form {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}

还要确保将脚本放在HTML的其余部分之后。

更正了代码段：

＆＃13;

＆＃13;

var button = document.getElementById('mainButton');

var openForm=function() {
    button.className = "active";
};
var checkInput = function(input) {
    if (input.value.length > 0) {
        input.className = "active";
    } else {
        input.className = "";
    }
};

＆＃13;

#mainButton.active {
     box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
#mainButton.active .signIn-form {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}

＆＃13;

<div id="mainButton">
    <div class="signIn-btn" onclick="openForm();">
        Sign In
    </div>
    <div class="signIn-form">
        <div class="close-btn" onclick="closeForm()">
            ✘
        </div>
        <div class="form-title">
            Sign In
        </div>
        <div class="formInput-group">
            <input type="text" id="name" onblur="checkInput(this)">
            <label for="name">Username</label>
        </div>
        <div class="formInput-group">
            <input type="password" id="password" onblur="checkInput(this)">
            <label for="password">Username</label>
        </div>
        <div class="form-btn">
            Go
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;