Я новичок в Javascript, и я сделал несколько квадратных блоков с div и точками (svg) поверх них,
, и я хотел бы пронумеровать эти div с помощью div id в цикле for:сделать массив.
Как мне исправить мой код?
//Javascript
//create a 12 dotBoxes spread evenly 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>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--FONTS-->
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Work+Sans:100,300,700' rel='stylesheet' type='text/css'>
<!--STYLESHEETS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/global.css" type="text/css" />
<!--SCRIPTS-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"> </script>-->
</head>
<body>
<svg id="canvas" width="100%" height="100%">
<line class="line original" x1="0" y1="0" x2="0" y2="0" />
</svg>
<div class="container-fluid">
<div class="splash">
<h1>Hello! My name is Soheum Hwang</h1>
<h2>Hover over each dot to see my work!</h2>
<br>
<p id="mobile-warning"> Sorry - this kind of functionality sucks on mobile! Please view it on a desktop for best results. </p>
</div>
</div>
<div id="grid-area">
<div id="grid">
<div id="popup">
<p>some text here</p>
</div>
</div>
</div>
<script src="scripts/dots.js"></script>
</body>
</html>
Я хочу, чтобы над разными полями висели разные тексты, поэтому я попытался создать их массив, который не работает ..