Пытаюсь сделать Шахматную доску через JS. Её сделать получилось, да вот только при попытке добавить шахматные фигуры - ничего не выходит, т.к. страница долго грузится и ничего не отображает. Помогите решить проблему.
Как я добавляю чёрные пешки на доску:
var row, column;
var square;
var container = document.getElementById("container");
for (row = 0; row < 8; ++row) {
for (column = 0; column < 8; ++column) {
square = document.createElement("div");
if ((row + column) % 2 == 0) {
square.style.backgroundColor = "white";
} else {
square.style.backgroundColor = "brown";
}
square.classList.add("square");
if (row = 2) {
square.innerHTML = "<img src='content/pesh_black.png'></img>";
}
container.appendChild(square);
}
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 570px) {
#container {
display: flex;
flex-wrap: wrap;
width: 400px;
border: 12px solid black;
border-radius: 6px;
height: 400px;
}
.square {
height: 50px;
width: 50px;
}
.square img{
height: 50px;
width: 50px;
}
}
@media (max-width: 570px) {
#container {
display: flex;
flex-wrap: wrap;
width: 200px;
border: 12px solid black;
border-radius: 6px;
height: 200px;
transform: scale(1.7);
}
.square {
height: 25px;
width: 25px;
}
.square img{
height: 25px;
width: 25px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Шахматная доска</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container"></div>
<script src="js.js"></script>
</body>
</html>
Создание шахматной доски без добавления пешек:
var row, column;
var square;
var container = document.getElementById("container");
for (row = 0; row < 8; ++row) {
for (column = 0; column < 8; ++column) {
square = document.createElement("div");
if ((row + column) % 2 == 0) {
square.style.backgroundColor = "white";
} else {
square.style.backgroundColor = "brown";
}
square.classList.add("square");
container.appendChild(square);
}
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 570px) {
#container {
display: flex;
flex-wrap: wrap;
width: 400px;
border: 12px solid black;
border-radius: 6px;
height: 400px;
}
.square {
height: 50px;
width: 50px;
}
.square img{
height: 50px;
width: 50px;
}
}
@media (max-width: 570px) {
#container {
display: flex;
flex-wrap: wrap;
width: 200px;
border: 12px solid black;
border-radius: 6px;
height: 200px;
transform: scale(1.7);
}
.square {
height: 25px;
width: 25px;
}
.square img{
height: 25px;
width: 25px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Шахматная доска</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container"></div>
<script src="js.js"></script>
</body>
</html>