Задать вопрос
@Arsen00
javascript

Как добавить фото из массива в div?

Мне нужно динамически создать 10 дивов и в них вставить изображение/изображения из массива.

Делал следующим образом, но изображение добавляется только в последний ДИВ:

<body>
<section class="memoryCards" id='Cards'></section>
</body>

<script>
var Card = new Array();
Card[0] = new Image();
Card[0].src = "Karten/MemoryCard1.jpg";
Card[1] = new Image();
Card[1].src = "Karten/MemoryCard2.jpg";
Card[2] = new Image();
Card[2].src = "Karten/MemoryCard3.jpg";
...

function PaareFunction(paars) {

	let x = 0;
  let cards = paars * 2;	

	for (let count = 1; count <= cards; count ++){
	var newDiv = document.createElement("div");
	newDiv.setAttribute("class","memory-card");
	newDiv.appendChild(Card[x]);

       document.querySelector("#Cards").appendChild(newDiv);
	}
}
</script>
  • Вопрос задан
  • 2639 просмотров
3 комментария
Подписаться 1 Простой 3 комментария
Решения вопроса 2
lovebarcafc
@lovebarcafc
Кратко не получится
Если я правильно вас понял, то: 
const images = [
    'Karten/MemoryCard1.jpg',
    'Karten/MemoryCard2.jpg',
    'Karten/MemoryCard3.jpg',
    'Karten/MemoryCard4.jpg',
];

images.forEach(src => {
    const img = document.createElement('img');
    img.src = src;

    const div = document.createElement('div');
    div.className = 'memory-card';
    div.append(img);

    document.querySelector('#Cards').append(div);
});
Ответ написан
4 комментария
4 комментария
qant
@qant
programer
Поменяй код так:

var Card = ["Karten/MemoryCard1.jpg", "Karten/MemoryCard2.jpg","Karten/MemoryCard3.jpg"];
.....
for (let count = 0; count <= cards; count++){

  var newDiv = document.createElement("div");
  var image = document.createElement("img");
  image.src = Card[x];
  newDiv.setAttribute("class","memory-card");
      newDiv.appendChild(image);
      x++;
       document.querySelector("#Cards").appendChild(newDiv);
  }
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать vpn сервис
05 нояб. 2024, в 17:38
150000 руб./за проект
Drupal. Перенос сайта с домена на поддомен
05 нояб. 2024, в 16:31
500 руб./за проект
Разработать макет для email рассылки
05 нояб. 2024, в 16:24
5000 руб./за проект
Ещё заказы