Как сделать так чтобы картинки менялись местами при нажатии на кнопку?

Question

[Адилет Касымбаев]

Нужно чтобы при нажатии на любую кнопку картинки хоатично менялись местами либо заменялись другими картинками. Очень прошу, помогите((

Comments

[Stockholm Syndrome]

как пытались решить задачу?

[Михаил]

это кнопки категории, и при нажатии картинки ниже фильтруются по этой категории, а не "хаотично менялись местами", какой смысл в этом?

Answer 1

[hzzzzl]

восемь урлов картинок в массив, по клику яваскриптом массив перемешиваем и перерисовываем содержимое div-ов

[1,2,3,4,5,6,7,8].sort((a, b) => Math.random() > 0.5 ? -1 : 1)

Comments

[Адилет Касымбаев]

спасибо чувак

[2bllk]

Немного красивее и компактнее: [1,2,3,4,5,6,7,8].sort(() => Math.random() - 0.5)

[Адилет Касымбаев]

2bllk, внутри сорт что нужно написать?

[2bllk]

Toasty, что написано, то и надо написать

[Адилет Касымбаев]

2bllk,
var navbutton = document.querySelector('.nav_item');

navbutton.onclick = function(){
['img/bird.png','img/chineese.png','img/phone.png','img/statue.png','img/stork.png','img/tree.png','img/water.png']
.sort(() => Math.random() - 0.5)
}

???

[hzzzzl]

Toasty, сохранить новый рандомный массив и перерисовать

[2bllk]

Toasty, я понял, к чему Вы клоните. Вам предложили решение конкретной задачи с перемешиванием массива картинок. А Вы желаете все решение полностью. Я могу только намекнуть. Вам необходимо пробежаться циклом по DOM-элементам, которые будут являться картинками (например, тегам img) и, перебирая массив ссылок, каждому элементу img присвоить свойство src, значение которого берется из массива. И все это каждый раз выполняется при нажатии на кнопку

[2bllk]

Не могу протестировать, т.к. со смартфона сложно

<img src="1.jpg" class="img_edge">
<img src="1.jpg" class="img_edge">
<img src="1.jpg" class="img_edge">

var navbutton = document.querySelector('.nav_item');

navbutton.onclick = ()=>{
let imgURLs = ['img/bird.png','img/chineese.png','img/phone.png']
.sort(() => Math.random() - 0.5);
let imgs = document.getElementsByClassName("img_edge");
for (let i in imgs)
imgs[i].src = imgURLs[i];
}