Здравствуйте. Впервые по учёбе сталкиваюсь с JavaScrip, поэтому очень мало что в нём понимаю. Имею задание и кусочки кода, в результате объединения и дописывания которых должно получиться следующее:
Но у меня получается выводить лишь пустые клетки, как только я пытаюсь заполнить их цифрами из массива - не выводится ничего.
Вот мой код:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>JS Игра</title>
<style>
#game td {
width: 50px; /* ширина клетки*/
height: 50px; /* высота клетки */
border: 1px solid black; /*рамка вокруг клеток*/
text-align: center; /*выравнивание тексту в клетке*/
cursor: pointer; /*смена курсора над клеткой*/
}
.active {
background-color: lightgreen;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="game">
<table class="field">
</table>
</div>
<script>
function drawGameFields(size) {
var field = $('.field');
var from = 1;
var to = Math.pow(size, 2);
var arr = [];
arr = createArr(from, to);
createCells(arr, size, field);
}
function createArr(from, to) { //создаём массив чисел
var arr = [];
for (var i = from; i <= to; i++) {
arr.push(i); //добавляем к массиву число
}
arr.sort(function compareRandom(a, b) { // перемешиваем массив
return Math.random() - 0.5;
});
return arr; // возвращаем готовый массив
}
function createCells(size, elem, arr) {
elem.html(function(index, element) {
var content = '';
var e = 0; //начальный индекс массива
for (var i = 0; i < size; i++) {
content += '<tr>';
for (var j = 0; j < size; j++) {
content += '<td>' + arr[e] + '</td>'; // добавляем число
e++; // увеличиваем индекс массива
}
content += '</tr>';
}
return content; //возвращаем построенное поле
});
}
var startSize = 3;
drawGameFields(startSize);
</script>
</body>
</html>