I just started learning Javascript and I managed to create square boxes with SVG dots on top of them.
Now, I'm looking to number these divs using a for loop by storing them in an array based on their div id. Can anyone provide guidance on how to correct my code?
//Javascript
//create twelve dotBoxes evenly spread across the window
function getGridAreaSize(){
$('#grid-area').width($(window).width() * .5);
}
function getBoxSize(){
var boxWidth = $('#grid-area').width() / 5;
return boxWidth;
};
function createBoxes(){
for (i = 0; i < 15; i++) {
// divsToAppend += '<div id="div' + (++i) + '" />';
// arrayDiv[i] = document.createElement('div');
// arrayDiv[i].id = 'dot' + i;
// arrayDiv[i].className = 'dotBox';
// document.getElementById('#grid').appendChild(arrayDiv[i].id);
// document.getElementById(arrayDiv[i].id).appendChild(dotarea);
// document.getElementById('#dotarea').appendChild(dot);
$('#grid').append("<div class='dotBox'><div class='dotarea'><div class='dot'></div></div></div>");
$('.dotBox').css('width',getBoxSize());
$('.dotBox').css('height',getBoxSize());
};
};
getGridAreaSize();
getBoxSize();
createBoxes();
//html
<!DOCTYPE html>
<html>
//Rest of HTML content removed for conciseness
<script src="scripts/dots.js"></script>
</body>
</html>I have been trying to display different text when hovering over each box but my attempt to store them in an array has not worked as expected. Any suggestions?