Javascript-форум - Нужна помощь.

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Нужна помощь. (https://javascript.ru/forum/events/82480-nuzhna-pomoshh.html)

Нужна помощь.

Есть код, суть его игра пятнашки.
<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 без фреймворков.

Ramosok,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Спасибо, учту на будущее.

Цитата:

Сообщение от Ramosok

Спасибо, учту на будущее.

какая проблема исправить своё сообщение, сейчас?

пятнашки макет

Ramosok,
проверка только на пусто, нужно ещё на соседа ...

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <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>
        const field = document.querySelector('.field');
        const active = document.querySelectorAll('.active');
        const change = document.getElementsByClassName('change');
        const divs = document.querySelectorAll('div');
        field.addEventListener('click', ({ target }) => {
            if(target == field) return;
            let itemChange = change[0];
            if (itemChange) {
                let twoActive = [target, itemChange].every(elem => elem.classList.contains('active'));
                if (twoActive) {
                    itemChange.classList.remove('change');
                    return;
                };
                if (itemChange != target) {
                    [target.innerHTML, itemChange.innerHTML] = [itemChange.innerHTML, target.innerHTML];
                    itemChange.classList.remove('change');
                    tour.innerHTML++;
                    if (target.classList.contains('active')) {
                        target.classList.remove('active')
                        itemChange.classList.add('active')
                    } else {
                        target.classList.add('active')
                        itemChange.classList.remove('active')
                    }
                }
            } else target.classList.toggle('change')
        })
    </script>
</body>
</html>

Спасибо большое.