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

Question

[Fedya Pavlyshynets]

Есть 10 картинок которые при клику должны перемешиваются

Comments

[Антон Литвиненко]

Isotope

[Kovalsky]

Антон Литвиненко, в отвеееет!

[Антон Литвиненко]

Kovalsky, я предпочитаю в ответах писать более емкие вещи)

Answer 1

[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/

Answer 2

[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

Comments

[v3shin]

Хех, то же самое, что и в предыдущем ответе. =)