javascript - Why is my program creating a 10x9 grid instead of a 10x10 grid? -

my code works functionality standpoint. want create "drawing pad" in creates grid of small 'divs' change color when mouse goes on them. 'divs' change color - don't understand why creating 10 x 9 grid instead of 10 x 10 grid?

// when document ready...  $(document).ready(function() {    // things...    newgrid(10); // create new 10 x 10 grid    $(".block").hover(function() {      $(this).css('background-color', 'white');    });  });    function newgrid(gridnum) {    var maxdivs = gridnum * gridnum;    var currentdivnum = 1; // current number of divs; have 100 total default      while (currentdivnum <= maxdivs) {      // while current div number less max divs...      div = document.createelement('div');      div.classname = 'block'; // set class name of divisions      document.body.style.backgroundcolor = 'red';      if (currentdivnum % gridnum == 0) {         div.style.float = 'clear';        div.style.backgroundcolor = '#000000';      } else {        div.style.float = 'left';        div.style.backgroundcolor = '#000000';      }      div.style.width = '25px';      div.style.height = '25px';        document.getelementbyid('divcontainer').appendchild(div);        currentdivnum++;    }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div id="divcontainer"></div>

find working example, insert clear div after each 10:

// when document ready...  $(document).ready(function() {  // things...  newgrid(10); // create new 10 x 10 grid      $(".block").hover(function() {         $(this).css('background-color', 'white');      });  });    function newgrid(gridnum) {    var maxdivs = gridnum * gridnum;  var currentdivnum = 1; // current number of divs; have 100 total default    while (currentdivnum <= maxdivs) {      // while current div number less max divs...        div = document.createelement('div');      div.classname = 'block'; // set class name of divisions      document.body.style.backgroundcolor = 'red';          div.style.float = 'left';      div.style.backgroundcolor = '#000000';          div.style.width = '25px';      div.style.height = '25px';        document.getelementbyid('divcontainer').appendchild(div);          if (currentdivnum % gridnum == 0) {         cleardiv = document.createelement('div');        cleardiv.style.clear = 'both';                document.getelementbyid('divcontainer').appendchild(cleardiv);        }             currentdivnum++;  }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="divcontainer"></div>

explanation

div.style.float = 'clear'; not valid, since float not take clear value, need enter div clears float both left , right i.e both , added after each x divs :

if (currentdivnum % gridnum == 0) {            cleardiv = document.createelement('div');           cleardiv.style.clear = 'both';            document.getelementbyid('divcontainer').appendchild(cleardiv);          }  

apart of that, code enters divs in normal manner..