The other day, I reached out here for assistance in creating a grid of squares using JavaScript and CSS.
Someone very helpful provided me with guidance on utilizing two nested for loops and the createElement('div'); method to achieve my goal. However, the example they shared was a code snippet that directly implemented this solution: http://jsfiddle.net/3x1kmcme/
I was looking to trigger this action upon a user click event by utilizing the .click() function from JQuery. Unfortunately, this approach is not working as expected, and I'm not receiving any error messages. I've thoroughly reviewed the code, made some changes, pre-declared variables, and meticulously checked each line, but it seems like the FOR loop isn't being entered. I could be mistaken, though.
Am I overlooking something obvious?
var rows = 8,
cells = 8,
count = 0;
var i, j,
top = 0,
left = 0;
var boxWidth = 50,
boxHeight = 50;
var $canvas = $('#canvas');
var $fragment = $(document.createDocumentFragment());
$(document).ready(function () {
"use strict";
$("#btnstart").click(function () {
function addBox(opts) {
var div = document.createElement('div');
div.id = opts.id;
div.className = 'alive';
div.style.top = opts.top + "px";
div.style.left = opts.left + "px";
$fragment.append(div);
}
for (j = 0; j < rows; j += 1) {
top = j * boxHeight;
for (i = 0; i < cells; i += 1) {
count += 1;
addBox({
count: count,
id: 'item' + i,
top: top,
left: i * boxWidth
});
}
}
$canvas.html($fragment);
});
});