Форум

Sevic · #1 (**permalink**) 04.02.2018, 14:29

Есть 3 блока div и 3 картинки.
Нужно вставить картинку по одной картинке в блок, но чтобы каждый раз в блоке div вставлялась случайная картинка

j0hnik · #2 (**permalink**) 04.02.2018, 15:41

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
var img = ['http://site.ru/img1.jpg','http://site.ru/img2.jpg','http://site.ru/img3.jpg'].sort((a, b)=>Math.random() - 0.5);
document.querySelectorAll('div').forEach((el,i)=>el.insertAdjacentHTML('beforeend', '<img src="'+img[i]+'">'));
</script>
</body>
</html>

ошибся 'beforeend' вместо ~~'afterend'~~

Sevic · #3 (**permalink**) 04.02.2018, 18:24

Через insertAdjacentHTML картинки вне блоков div.

Сделал вот так:

var arrDivs = [];
arrDivs.push(div1, div2, div3);

var arrPics = [];
arrPics.push(pic1, pic2, pic3);

function ranPic() {
var item = arrPics[Math.floor(Math.random()*3)];
return item;
};

function addPic(ar) {
ar.forEach(function(el,i) {
el.appendChild(ranPic())
});
};

addPic(arrDivs);

Получается, то все 3 картинки, то 2, то 1, всегда в разных местах)

рони · #4 (**permalink**) 04.02.2018, 18:29

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

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

[js]
... ваш код...
[/js]

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

j0hnik · #5 (**permalink**) 04.02.2018, 18:54

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

Через insertAdjacentHTML картинки вне блоков

ошибся 'beforeend' вместо ~~'afterend'~~

поправил пост

Sevic · #6 (**permalink**) 04.02.2018, 20:35

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

ошибся 'beforeend' вместо ~~'afterend'~~

поправил пост

Большое спасибо, работает)

Форум

Справочник

Discord чат

Курсы javascript