|
Сообщение от sober
|
|
Вот только не смейтесь
|
На самом деле ничего смешного то тут и нет.
У вас в разметке (в HTML) ошибка есть: тэг td находится внутри тэга body, а должен быть непосредственно (должен быть прямым потомком) в тэге tr, который в свою очередь должен быть прямым потомком тэга table.
Я переделал ваш скрипт, результат можно посмотреть тут:
https://codesandbox.io/s/sharp-brown...=/src/index.js
Или тут:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<meta charset="UTF-8" />
<style>
h1 {
color: black;
font-family: Palatino Linotype;
}
div {
font-family: Palatino Linotype;
}
#XO {
background-color: #a5deff;
position: relative;
width: 400px;
}
div.square {
position: absolute;
height: 20px;
width: 20px;
cursor: pointer;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const SQARES_NUMBER = 51;
const HORISONTAL_STEP_PX = 15;
const VERTICAL_STEP_PX = 0;
const DECREASE_KEY = "Shift";
const DEFAULT_SQUARE_IMAGE = "https://fakeimg.pl/20x20/?text=0&font_size=20";
const SQUARE_IMAGES = [
"https://fakeimg.pl/20x20/?text=1&font_size=20",
"https://fakeimg.pl/20x20/?text=2&font_size=20",
"https://fakeimg.pl/20x20/?text=3&font_size=20",
"https://fakeimg.pl/20x20/?text=4&font_size=20",
"https://fakeimg.pl/20x20/?text=5&font_size=20",
"https://fakeimg.pl/20x20/?text=6&font_size=20",
"https://fakeimg.pl/20x20/?text=7&font_size=20",
"https://fakeimg.pl/20x20/?text=8&font_size=20",
"https://fakeimg.pl/20x20/?text=9&font_size=20",
"https://fakeimg.pl/20x20/?text=10&font_size=20",
DEFAULT_SQUARE_IMAGE
];
const container = document.querySelector(".squares-container-js");
if (!container) {
throw new Error(
"Element with [.squares-container-js] selector not found"
);
}
container.innerHTML = "";
for (let i = 0; i < SQARES_NUMBER; i++) {
const square = document.createElement("div");
square.className = "square square-js";
square.id = "square" + i;
square.style.left = HORISONTAL_STEP_PX * i + "px";
square.style.top = VERTICAL_STEP_PX * i + "px";
square.dataset.imageIndex = -1;
const squareImage = document.createElement("img");
squareImage.src = DEFAULT_SQUARE_IMAGE;
square.appendChild(squareImage);
container.appendChild(square);
}
let shouldBeDecreased = false;
document.addEventListener("keydown", function (e) {
shouldBeDecreased = shouldBeDecreased || e.key === DECREASE_KEY;
});
document.addEventListener("keyup", function (e) {
if (shouldBeDecreased && e.key === DECREASE_KEY) {
shouldBeDecreased = false;
}
});
container.addEventListener("click", function (e) {
let target = e.target;
const selector = ".square-js";
if (!target) {
return;
}
if (!target.matches(selector)) {
target = target.closest(selector);
if (!target) {
return;
}
}
const currentImageIndex = +(target.dataset.imageIndex || 0);
const step = shouldBeDecreased ? -1 : 1;
let newImageIndex = (currentImageIndex + step) % SQUARE_IMAGES.length;
if (newImageIndex < 0) {
newImageIndex += SQUARE_IMAGES.length;
}
target.dataset.imageIndex = newImageIndex;
target.querySelector("img").src = SQUARE_IMAGES[newImageIndex];
});
});
if (document.readyState === "complete") {
document.dispatchEvent(new Event("DOMContentLoaded"));
}
</script>
</head>
<body>
<div class="centerColumn">
<div id="textBlock">
<div id="XO" class="squares-container-js">
Loading...
</div>
</div>
</div>
</body>
</html>