Есть код, суть его игра пятнашки.
<style>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
-webkit-tap-highlight-color: transparent;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: rgb(61, 58, 58);
font-size: 16px;
}
h1, p {
margin: 0;
color: #fff;
text-align: center;
}
h1 {
font-size: calc(3rem + 3vmin);
padding: 0 3vmin;
}
p {
font-size: calc(2rem + 2vmin);
}
.field {
width: 80vmin;
height: 80vmin;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: rgb(226, 226, 226);
padding: 1vmin;
}
.field div {
width: 23%;
height: 23%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: calc(2rem + 2vmin);
border-radius: 1vmin;
font-weight: bold;
}
.win {
color: red;
font-weight: bolder;
text-align: center;
font-size: calc(3.5rem + 3.5vmin);
}
/*Элементы игрового поля*/
.active {
background-color: #fff;
-webkit-box-shadow: inset -0.26vw -0.26vw .26vw 0 rgba( 150, 150, 150, .5),
inset .26vw .26vw .26vw 0 rgba( 255, 255, 255, .5);
box-shadow: inset -0.26vw -0.26vw .26vw 0 rgba( 150, 150, 150, .5),
inset .26vw .26vw .26vw 0 rgba( 255, 255, 255, .5);
}
.active:hover {
cursor: pointer;
opacity: .9;
}
/*Выбранный элемент игрового поля*/
.change {
-webkit-transform: scale(.95);
-ms-transform: scale(.95);
transform: scale(.95);
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
@media screen and (max-width: 767px) and (orientation: landscape) {
html, body {
font-size: 12px;
}
h1 {
font-size: calc(2rem + 2vmin);
padding: 0 3vmin;
}
p {
font-size: calc(1rem + 1vmin);
}
}
@media (max-width: 480px) {
html, body {
font-size: 12px;
}
}
</style></head>
<body>
<h1>Игра Пятнашки</h1>
<div class="field">
<div id="elem1" class="active">15</div>
<div id="elem2" class="active">14</div>
<div id="elem3" class="active">13</div>
<div id="elem4" class="active">12</div>
<div id="elem5" class="active">11</div>
<div id="elem6" class="active">10</div>
<div id="elem7" class="active">9</div>
<div id="elem8" class="active">8</div>
<div id="elem9" class="active">7</div>
<div id="elem10" class="active">6</div>
<div id="elem11" class="active">5</div>
<div id="elem12" class="active">4</div>
<div id="elem13" class="active">3</div>
<div id="elem14" class="active">2</div>
<div id="elem15" class="active">1</div>
<div id="elem16" class=""></div>
</div>
<p>Ход: <span id="tour">0</span></p>
<script src="script.js">
</script>
</body>
</html>
const field = document.querySelector('.field');
const active = document.querySelectorAll('.active');
const change = document.getElementsByClassName('.change');
const divs = document.querySelectorAll('div');
field.addEventListener('click', (event) => {
console.dir(event.target);
if(!event.target.classList.contains('change') && event.target.classList.contains('active')){
divs.forEach(item => {
item.classList.remove('change');
event.target.classList.add('change');
})
}
if(event.target.classList.contains('active'))
divs.forEach(item => {
if(item.classList.contains('active','change'))
item.classList.remove('active','change');
})
event.target.classList.add('active');
})
мне нужно что бы при клике на элемент с элемента на котором был предыдущий клик удалялся класс classList.remove('active','change'); и удалялся innerHTML и всё это переносилось на элемент на котором сработало событие.
P/S на чистом js без фреймворков.
