Javascript 未捕获类型错误：无法设置属性'；类名'；null.active的值

它是一个登录按钮和一个表单，两者都包含在一个id

mainButton

框中，但它们都有不同的

z-index

。单击登录btn时，表单将显示。但我遇到了一个问题，当单击按钮时，它不工作，chrome开发工具显示

未捕获的TypeError:无法将属性“className”设置为null

关于

openForm（）

，我的javascript似乎有问题

var-button=document.getElementById（'mainButton'）；
var openForm=function（）{
button.className=“活动”；
};
var checkInput=函数（输入）{
如果（input.value.length>0）{
input.className=“活动”；
}否则{
input.className=“”；
}
};
#主按钮。激活{
盒影：019px38pxRGBA（0,0,0,0.3），015px12pxRGBA（0,0,0,0.22）；
}
#主按钮。激活。登录表单{
-webkit变换：比例（1,1）；
-moz变换：比例（1,1）；
-ms变换：比例（1,1）；
-o变换：标度（1,1）；
变换：比例（1,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其余部分之后

更正的代码段：


var-button=document.getElementById（'mainButton'）；
var openForm=function（）{
button.className=“活动”；
};
var checkInput=函数（输入）{
如果（input.value.length>0）{
input.className=“活动”；
}否则{
input.className=“”；
}
};
#mainButton.active{
盒影：019px38pxRGBA（0,0,0,0.3），015px12pxRGBA（0,0,0,0.22）；
}
#mainButton.active.signIn表单{
-webkit变换：比例（1,1）；
-moz变换：比例（1,1）；
-ms变换：比例（1,1）；
-o变换：标度（1,1）；
变换：比例（1,1）；
}

登录
✘
登录
用户名
用户名
去
这样行吗？parent.button.className=“活动”；我在这个代码片段中没有看到任何错误。你确定你把JS放在HTML之后了吗？