javascript - Uncaught TypeError: Cannot set property 'className' of null.active -

it's sign in button , form both contain in 1 id mainbutton box, each of them has different z-index. when click signin-btn, form show out. occur problem doesn't work when click button, , chrome dev tools shows

uncaught typeerror: cannot set property 'classname' of null'

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

there additional space in css selector. should be:

#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); } 

also make sure script placed after rest of html.

corrected code snippet:

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>