Geek Answers Handbook

Why does my program create a 10x9 grid instead of a 10x10 grid?

My code works in terms of functionality. I want to create a “drawing panel” in that it creates a grid of small “divs” that change color when the mouse passes over them. Color changing divs - but I don’t understand why it creates a 10 x 9 grid instead of a 10 x 10 grid?

// When the document is ready... $(document).ready(function() { // Do some things... newGrid(10); // create a 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; will have 100 total by default while (currentDivNum <= maxDivs) { // While the current div number is less than max divs... div = document.createElement('div'); div.className = 'block'; // set the class name of the 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>
+5
source share
5 answers

Find this working example, just insert a clear div after every 10:

 // When the document is ready... $(document).ready(function() { // Do some things... newGrid(10); // create a 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; will have 100 total by default while (currentDivNum <= maxDivs) { // While the current div number is less than max divs... div = document.createElement('div'); div.className = 'block'; // set the class name of the 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 is not perceived as a value, so you really need to enter a div where it clears the float from both left and right, i.e. Both , and this is added after each X divs:

 if (currentDivNum % gridNum == 0) { clearDiv = document.createElement('div'); clearDiv.style.clear = 'both'; document.getElementById('divContainer').appendChild(clearDiv); }

In addition, code is entered into divs in the usual way.

+12
source

Invalid:

  div.sytle.float = 'clear';

See a working JSFiddle that fixes the problem: https://jsfiddle.net/cwpxy8dv/

The solution is to leave all the elements floating to the left and move on to the next line, applying a clear left for every tenth element.

A key part of the solution is the following snippet:

 div.style.float = 'left'; // set for all grid divs if ( (currentDivNum-1) % gridNum == 0) { // use currentDivNum-1 since it starts at 1 div.style.clear = 'left'; // clear to next row }
+4
source

You need to make two changes to your code:

 while (currentDivNum < maxDivs) {

and

 if (currentDivNum % (gridNum+1) == 0) {

The reason your problem arose was because CSS was added on every tenth square clear:both; , which meant that it began with a new line. My improvement has given this opportunity to every square of the eleventh that you need.

In addition to this, it was necessary to delete one last square that appears on the last (new) line. That is why the while part is also being updated.

0
source

No need to use if and else and call performance if the number of div is large. Use the patch code below for performance.

 $(document).ready(function() { // Do some things... newGrid(10); // create a 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; will have 100 total by default var divWidth = 25; var divHeight = 25; var container = document.getElementById('divContainer'); container.style.width = (divWidth * gridNum)+'px'; while (currentDivNum <= maxDivs) { // While the current div number is less than max divs... div = document.createElement('div'); div.className = 'block'; // set the class name of the divisions document.body.style.backgroundColor = 'red'; div.style.float = 'left'; div.style.backgroundColor = '#000'; div.style.width = divWidth+'px'; div.style.height = divHeight+'px'; div.style.color = '#fff'; div.innerHTML = currentDivNum; container.appendChild(div); currentDivNum++; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="divContainer"></div>
0
source

I made some changes while I changed the counter, now we start at 0.

clear not a css property value, it itself has a property:

 .myclass { clear: left; }

Here is the working code:

 // When the document is ready... $(document).ready(function() { // create a new 10 x 10 grid newGrid(10); $(".block").hover(function() { $(this).css('background-color', 'white'); }); }); function newGrid(gridNum) { var maxDivs = gridNum * gridNum; // Current number of divs will have 100 total by default var currentDivNum = 0; while (currentDivNum < maxDivs) { // While the current div number is less than max divs... div = document.createElement('div'); // set the class name of the divisions div.className = 'block'; // Set background color document.body.style.backgroundColor = 'red'; div.style.float = 'left'; div.style.backgroundColor = '#000000'; if ((currentDivNum % gridNum) == 0) div.style.clear = 'left'; div.style.width = div.style.height = '25px'; document.getElementById('divContainer').appendChild(div); currentDivNum++; } }

Here is an example

0
source

More articles:


All Articles