@Fedorrr_01
Начинающий front-end developer

Как правильно написать функцию которая при клику будет перемешивать Dom элементы?

Есть 10 картинок которые при клику должны перемешиваются
  • Вопрос задан
  • 113 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Sun_Day
const button = document.querySelector(".shuffle");
const wrapper = document.querySelector(".wrapper");
const image = document.querySelectorAll(".image")

button.addEventListener("click", () => {
    const images = [...image];
    const shuffled = shuffle(images);

    shuffled.forEach(el => wrapper.appendChild(el));
})


function shuffle(arr) {
    let newArr = arr.slice();
    let i = newArr.length;
    let r;
    let temp;
    while (i--) {
        r = Math.floor(Math.random() * (i + 1));

        temp = newArr[i];
        newArr[i] = newArr[r];
        newArr[r] = temp;
    }

    return newArr;
}


<div class="wrapper">

<div class="image">
el1
<img src="https://trikky.ru/wp-content/blogs.dir/1/files/2020/04/22/1564314090_3.jpg">
</div>
<div class="image">
el2
<img src="https://trikky.ru/wp-content/blogs.dir/1/files/2020/04/22/1564314090_3.jpg">
</div>
<div class="image">
el3
<img src="https://trikky.ru/wp-content/blogs.dir/1/files/2020/04/22/1564314090_3.jpg">
</div>
<div class="image">
el4
<img src="https://trikky.ru/wp-content/blogs.dir/1/files/2020/04/22/1564314090_3.jpg">
</div>
<div class="image">
el5
<img src="https://trikky.ru/wp-content/blogs.dir/1/files/2020/04/22/1564314090_3.jpg">
</div>
<div class="image">
el6
<img src="https://trikky.ru/wp-content/blogs.dir/1/files/2020/04/22/1564314090_3.jpg">
</div>
<div class="image">
el7
<img src="https://trikky.ru/wp-content/blogs.dir/1/files/2020/04/22/1564314090_3.jpg">
</div>
<div class="image">
el8
<img src="https://trikky.ru/wp-content/blogs.dir/1/files/2020/04/22/1564314090_3.jpg">
</div>
<div class="image">
el9
<img src="https://trikky.ru/wp-content/blogs.dir/1/files/2020/04/22/1564314090_3.jpg">
</div>
<div class="image">
el10
<img src="https://trikky.ru/wp-content/blogs.dir/1/files/2020/04/22/1564314090_3.jpg">
</div>

</div>

<button class="shuffle">
 shuffle
</button>


https://jsfiddle.net/mvye5r2q/23/
Ответ написан
Комментировать
v3shin
@v3shin
Веб-шаман
<div class="images">
<div class="image">йа картинко 1</div>
<div class="image">йа картинко 2</div>
<div class="image">йа картинко 3</div>
</div>
<button id="shuffle">Перемешать</button>

<script>
function shuffle(a){for(var e=a.length;e&&--e;){var t=a[e],n=Math.floor(Math.random()*(e+1));a[e]=a[n],a[n]=t}return a}

document.getElementById('shuffle').addEventListener('click', () => {
    let imagesContainer = document.querySelector('.images'),
        images = [...imagesContainer.querySelectorAll('.image')];
    shuffle(images).forEach(image => {
        imagesContainer.appendChild(image);
    });
});
</script>


https://jsfiddle.net/95uL6nsb/1
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы