 
			
				30.06.2022, 21:50
			
			
			
		  
	 | 
 
	
		
		
		
			
			| 
			
				
				
				 Новичок на форуме 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 30.06.2022 
					
					
					
						Сообщений: 6
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	| 
	
	
		
		
			
			 
				Скрипт смены картинок при нажатии. Добавить смену в обратном порядке при нажатойSHIFT
			 
			
		
		
		
		Подскажите есть такой скрипт  
 
 
<script>  
var squares = [];  
var squares_signs = []  
function Initialization(){  
for (var i = 0; i < 38001; i++){  
squares[i] = document.getElementById("square"+i);  
}  
for (var i = 0; i < 38001; i++){  
squares[i].innerHTML = "<img src = 'empty.png'>";  
squares_signs[i] = 0;  
}  
}  
function ChangeSign(square_i){  
squares[square_i].innerHTML = "<img src = 'circle.png'>";  
 
if (squares_signs[square_i] == 0){  
squares[square_i].innerHTML = "<img src = 'circle.png'>";  
squares_signs[square_i] = 1;  
return;  
}  
if (squares_signs[square_i] == 1){  
squares[square_i].innerHTML = "<img src = 'cross.png'>";  
squares_signs[square_i] = 2;  
return;  
}  
if (squares_signs[square_i] == 2){  
squares[square_i].innerHTML = "<img src = 'dus.png'>";  
squares_signs[square_i] = 3;  
return;  
}  
if (squares_signs[square_i] == 3){  
squares[square_i].innerHTML = "<img src = 'puat.png'>";  
squares_signs[square_i] = 4;  
return;  
}  
if (squares_signs[square_i] == 4){  
squares[square_i].innerHTML = "<img src = 'chest.png'>";  
squares_signs[square_i] = 5;  
return;  
}  
if (squares_signs[square_i] == 5){  
squares[square_i].innerHTML = "<img src = 'seem.png'>";  
squares_signs[square_i] = 6;  
return;  
}  
if (squares_signs[square_i] == 6){  
squares[square_i].innerHTML = "<img src = 'voosem.png'>";  
squares_signs[square_i] = 7;  
return;  
}  
if (squares_signs[square_i] == 7){  
squares[square_i].innerHTML = "<img src = 'deeviat.png'>";  
squares_signs[square_i] = 8;  
return;  
}  
if (squares_signs[square_i] == 8){  
squares[square_i].innerHTML = "<img src = 'des.png'>";  
squares_signs[square_i] = 9;  
return;  
}  
if (squares_signs[square_i] == 9){  
squares[square_i].innerHTML = "<img src = 'odincat.png'>";  
squares_signs[square_i] = 10;  
return;  
}  
if (squares_signs[square_i] == 10){  
squares[square_i].innerHTML = "<img src = 'empty.png'>";  
squares_signs[square_i] = 0;  
}  
}  
</script>  
 
 
html страница где скрипт меняет картинки при нажатии левой кнопкой мыши. Последовательно одну за другой. Можно ли сделать так, чтоб при нажатой клавиши SHIFT и нажимании на мышь картинки менялись в обратном порядке? 
 
Логика такая: 
если клавиша шифт не нажата первая переключается на вторую ->3 ->4->5  и так далее до десятой. 
 
если клавиша шифт нажата, то первая переключается на 10 ->9 ->8 ->7  и так далее до первой. 
 
Я вообще не программист, только разбираюсь со всем этим, не принципиально, чтоб была именно клавиша шифт, подойдет любая клавиша на клавиатуре. 
		
	
		
		
		
		
		
		
	
		
			
			
	
			
			
			
			
			
				 
			
			
			
			
			
			
				
			
			
			
		 
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				30.06.2022, 22:01
			
			
			
		  
	 | 
 
	
		
		
		
			  | 
			
			
				
				
				 Профессор 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 27.05.2010 
					
					
					
						Сообщений: 33,150
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	
	
	
		
		
		
		
		что это за магическая цифра?  
		
	
		
		
		
		
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				30.06.2022, 22:07
			
			
			
		  
	 | 
 
	
		
		
		
			
			| 
			
				
				
				 Новичок на форуме 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 30.06.2022 
					
					
					
						Сообщений: 6
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	
	
	
		
		
		
		
		
	
 
	
		
			Сообщение от рони
			 
		
	 | 
 
	| 
		что это за магическая цифра?
	 | 
 
	
 
 Я не знаю, так было. Этот скрипт я скачал 5 лет назад и приспособил для своих задач. Теперь вопрос появился, получится его модернизировать?  
		
	
		
		
		
		
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				30.06.2022, 22:21
			
			
			
		  
	 | 
 
	
		
		
		
			  | 
			
			
				
				
				 Профессор 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 27.05.2010 
					
					
					
						Сообщений: 33,150
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	| 
	
	
		
		
		
		
		 sober, 
 надеюсь вам кто-то поможет ... 
		
	
		
		
		
		
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				30.06.2022, 22:41
			
			
			
		  
	 | 
 
	
		
		
		
			
			| 
			
				
				
				 Профессор 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 04.12.2012 
					
					
					
						Сообщений: 3,841
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	| 
	
	
		
		
		
		
		 sober, это же не полный скрипт? 
Где и как вызывается функция ChangeSign? 
 
Давно такого Индусского кода не видел =) 
		
	
		
		
		
		
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				30.06.2022, 23:01
			
			
			
		  
	 | 
 
	
		
		
		
			
			| 
			
				
				
				 Новичок на форуме 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 30.06.2022 
					
					
					
						Сообщений: 6
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	
	
	
		
		
		
		
		
	
 
	
		
			Сообщение от Nexus
			 
		
	 | 
 
	
		sober, это же не полный скрипт? 
Где и как вызывается функция ChangeSign? 
 
Давно такого Индусского кода не видел =)
	 | 
 
	
 
 Вот только не смейтесь
 
 Полностью страница выглядит так:
 
<body>
 <td class="centerColumn">
 <div id="textBlock">
 <!-- <body> -->
[css]
<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>
[css]
[js]
<script>
 var squares = [];
 var squares_signs = []
 function Initialization(){
 for (var i = 0; i < 38001; i++){
 squares[i] = document.getElementById("square"+i);
 }
 for (var i = 0; i < 38001; i++){
 squares[i].innerHTML = "<img src = 'empty.png'>";
 squares_signs[i] = 0;
 }
 }
 function ChangeSign(square_i){
 squares[square_i].innerHTML = "<img src = 'circle.png'>";
 if (squares_signs[square_i] == 0){
 squares[square_i].innerHTML = "<img src = 'circle.png'>";
 squares_signs[square_i] = 1;
 return;
 }
 if (squares_signs[square_i] == 1){
 squares[square_i].innerHTML = "<img src = 'cross.png'>";
 squares_signs[square_i] = 2;
 return;
 }
 if (squares_signs[square_i] == 2){
 squares[square_i].innerHTML = "<img src = 'dus.png'>";
 squares_signs[square_i] = 3;
 return;
 }
 if (squares_signs[square_i] == 3){
 squares[square_i].innerHTML = "<img src = 'puat.png'>";
 squares_signs[square_i] = 4;
 return;
 }
 if (squares_signs[square_i] == 4){
 squares[square_i].innerHTML = "<img src = 'chest.png'>";
 squares_signs[square_i] = 5;
 return;
 }
 if (squares_signs[square_i] == 5){
 squares[square_i].innerHTML = "<img src = 'seem.png'>";
 squares_signs[square_i] = 6;
 return;
 }
 if (squares_signs[square_i] == 6){
 squares[square_i].innerHTML = "<img src = 'voosem.png'>";
 squares_signs[square_i] = 7;
 return;
 }
 if (squares_signs[square_i] == 7){
 squares[square_i].innerHTML = "<img src = 'deeviat.png'>";
 squares_signs[square_i] = 8;
 return;
 }
 if (squares_signs[square_i] == 8){
 squares[square_i].innerHTML = "<img src = 'des.png'>";
 squares_signs[square_i] = 9;
 return;
 }
 if (squares_signs[square_i] == 9){
 squares[square_i].innerHTML = "<img src = 'odincat.png'>";
 squares_signs[square_i] = 10;
 return;
 }
 if (squares_signs[square_i] == 10){
 squares[square_i].innerHTML = "<img src = 'empty.png'>";
 squares_signs[square_i] = 0;
 }
 }
</script>
[/js]
<div id = "XO">
 
 <div class="square"id="square0" style = "left:0px; top:0px;" onclick = "ChangeSign(0);"></div>
 <div class="square"id="square1" style = "left:15px; top:0px;" onclick = "ChangeSign(1);"></div>
 <div class="square"id="square2" style = "left:30px; top:0px;" onclick = "ChangeSign(2);"></div>
 <div class="square"id="square3" style = "left:45px; top:0px;" onclick = "ChangeSign(3);"></div>
 <div class="square"id="square4" style = "left:60px; top:0px;" onclick = "ChangeSign(4);"></div>
 <div class="square"id="square5" style = "left:75px; top:0px;" onclick = "ChangeSign(5);"></div>
 <div class="square"id="square6" style = "left:90px; top:0px;" onclick = "ChangeSign(6);"></div>
 <div class="square"id="square7" style = "left:105px; top:0px;" onclick = "ChangeSign(7);"></div>
 <div class="square"id="square8" style = "left:120px; top:0px;" onclick = "ChangeSign(8);"></div>
 <div class="square"id="square9" style = "left:135px; top:0px;" onclick = "ChangeSign(9);"></div>
 <div class="square"id="square10" style = "left:150px; top:0px;" onclick = "ChangeSign(10);"></div>
 <div class="square"id="square11" style = "left:165px; top:0px;" onclick = "ChangeSign(11);"></div>
 <div class="square"id="square12" style = "left:180px; top:0px;" onclick = "ChangeSign(12);"></div>
 <div class="square"id="square13" style = "left:195px; top:0px;" onclick = "ChangeSign(13);"></div>
 <div class="square"id="square14" style = "left:210px; top:0px;" onclick = "ChangeSign(14);"></div>
 <div class="square"id="square15" style = "left:225px; top:0px;" onclick = "ChangeSign(15);"></div>
 <div class="square"id="square16" style = "left:240px; top:0px;" onclick = "ChangeSign(16);"></div>
 <div class="square"id="square17" style = "left:255px; top:0px;" onclick = "ChangeSign(17);"></div>
 <div class="square"id="square18" style = "left:270px; top:0px;" onclick = "ChangeSign(18);"></div>
 <div class="square"id="square19" style = "left:285px; top:0px;" onclick = "ChangeSign(19);"></div>
 <div class="square"id="square20" style = "left:300px; top:0px;" onclick = "ChangeSign(20);"></div>
 <div class="square"id="square21" style = "left:315px; top:0px;" onclick = "ChangeSign(21);"></div>
 <div class="square"id="square22" style = "left:330px; top:0px;" onclick = "ChangeSign(22);"></div>
 <div class="square"id="square23" style = "left:345px; top:0px;" onclick = "ChangeSign(23);"></div>
 <div class="square"id="square24" style = "left:360px; top:0px;" onclick = "ChangeSign(24);"></div>
 <div class="square"id="square25" style = "left:375px; top:0px;" onclick = "ChangeSign(25);"></div>
 <div class="square"id="square26" style = "left:390px; top:0px;" onclick = "ChangeSign(26);"></div>
 <div class="square"id="square27" style = "left:405px; top:0px;" onclick = "ChangeSign(27);"></div>
 <div class="square"id="square28" style = "left:420px; top:0px;" onclick = "ChangeSign(28);"></div>
 <div class="square"id="square29" style = "left:435px; top:0px;" onclick = "ChangeSign(29);"></div>
 <div class="square"id="square30" style = "left:450px; top:0px;" onclick = "ChangeSign(30);"></div>
 <div class="square"id="square31" style = "left:465px; top:0px;" onclick = "ChangeSign(31);"></div>
 <div class="square"id="square32" style = "left:480px; top:0px;" onclick = "ChangeSign(32);"></div>
 <div class="square"id="square33" style = "left:495px; top:0px;" onclick = "ChangeSign(33);"></div>
 <div class="square"id="square34" style = "left:510px; top:0px;" onclick = "ChangeSign(34);"></div>
 <div class="square"id="square35" style = "left:525px; top:0px;" onclick = "ChangeSign(35);"></div>
 <div class="square"id="square36" style = "left:540px; top:0px;" onclick = "ChangeSign(36);"></div>
 <div class="square"id="square37" style = "left:555px; top:0px;" onclick = "ChangeSign(37);"></div>
 <div class="square"id="square38" style = "left:570px; top:0px;" onclick = "ChangeSign(38);"></div>
 <div class="square"id="square39" style = "left:585px; top:0px;" onclick = "ChangeSign(39);"></div>
 <div class="square"id="square40" style = "left:600px; top:0px;" onclick = "ChangeSign(40);"></div>
 <div class="square"id="square41" style = "left:615px; top:0px;" onclick = "ChangeSign(41);"></div>
 <div class="square"id="square42" style = "left:630px; top:0px;" onclick = "ChangeSign(42);"></div>
 <div class="square"id="square43" style = "left:645px; top:0px;" onclick = "ChangeSign(43);"></div>
 <div class="square"id="square44" style = "left:660px; top:0px;" onclick = "ChangeSign(44);"></div>
 <div class="square"id="square45" style = "left:675px; top:0px;" onclick = "ChangeSign(45);"></div>
 <div class="square"id="square46" style = "left:690px; top:0px;" onclick = "ChangeSign(46);"></div>
 <div class="square"id="square47" style = "left:705px; top:0px;" onclick = "ChangeSign(47);"></div>
 <div class="square"id="square48" style = "left:720px; top:0px;" onclick = "ChangeSign(48);"></div>
 <div class="square"id="square49" style = "left:735px; top:0px;" onclick = "ChangeSign(49);"></div>
 <div class="square"id="square50" style = "left:750px; top:0px;" onclick = "ChangeSign(50);"></div>
</div>
<script>
 Initialization();
</script><!-- </body> -->
 </div>
 </td>
</body>
 
		
	
		
		
		
		
		
		
		
						  
				
				Последний раз редактировалось sober, 30.06.2022 в 23:58.
				
				
			
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				30.06.2022, 23:38
			
			
			
		  
	 | 
 
	
		
		
		
			  | 
			
			
				
				
				 Профессор 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 27.05.2010 
					
					
					
						Сообщений: 33,150
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	
	
	
		
		
		
		
		sober, 
 Пожалуйста, отформатируйте свой код!
 
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
 
[html run]
... минимальный код страницы с вашей проблемой
[/html]
 
О том, как вставить в сообщение  исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте  http://javascript.ru/formatting.  
		
	
		
		
		
		
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				01.07.2022, 01:03
			
			
			
		  
	 | 
 
	
		
		
		
			
			| 
			
				
				
				 Профессор 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 04.12.2012 
					
					
					
						Сообщений: 3,841
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	
	
	
		
		
		
		
		
	
 
	| 
		
			Сообщение от 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>
 
		
	
		
		
		
		
		
		
		
						  
				
				Последний раз редактировалось Nexus, 01.07.2022 в 01:14.
				
				
			
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				01.07.2022, 01:13
			
			
			
		  
	 | 
 
	
		
		
		
			  | 
			
			
				
				
				 Профессор 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 27.05.2010 
					
					
					
						Сообщений: 33,150
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	
	
	
		
		
		
		
		
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #XO {
            background-color: #A5DEFF;
            display: flex;
        }
        div.square {
            height: 100px;
            width: 100px;
            cursor: pointer;
        }
        div.square img {
            height: 100px;
            width: 100px;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let elem = document.querySelector("#XO");
            let src = ["https://via.placeholder.com/150/0000FF/FFFFFF/?text=+empty",  //заменить на свои ссылки 'empty.png' и т.д.
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+circle",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+cross",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+dus",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+puat",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+chest",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+seem",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+voosem",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+deeviat",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+des",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+odincat"
            ];
            let len = src.length;
            let num = 51;//сколько блоков создать
            let arr = Array.from({
                length: num
            }, v => `<div class="square" data-index="0"><img src = '${src[0]}'></div>`)
            elem.insertAdjacentHTML("beforeend", arr.join(''));
            let up = 1;
            document.addEventListener("keydown", function(e) {
                if (e.shiftKey) up = -1;
            })
            document.addEventListener("keyup", function(e) {
                up = 1;
            })
            elem.addEventListener("click", function({
                target
            }) {
                if (target = target.closest(".square")) {
                    let index = +target.dataset.index;
                    index = (index + len + up) % len;
                    target.dataset.index = index;
                    target.querySelector("img").src = src[index];
                };
            })
        })
    </script>
</head>
<body>
    <div id="XO"></div>
</body>
</html>
 
		
	
		
		
		
		
		
		
	
		
			
			
	
			
			
			
			
			
				 
			
			
			
			
			
			
				
			
			
			
		 
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				01.07.2022, 01:32
			
			
			
		  
	 | 
 
	
		
		
		
			
			| 
			
				
				
				 Профессор 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 04.12.2012 
					
					
					
						Сообщений: 3,841
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	| 
	
	
		
		
		
		
		 рони, 54-я строка - крутое решение, я до такого не додумался) 
Что element.closest может еще и "себя" вернуть не знал. 
 
Вы избавились от абсолютного позиционирования блоков .square, считаете, что ТС оно может быть вовсе не нужно? 
		
	
		
		
		
		
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
 
 |  
  |