Задать вопрос
@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>
  • Вопрос задан
  • 2648 просмотров
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 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Full-Stack для сайта на Bitrix (Аспро). Знания в Java, CSS и PHP
12 нояб. 2024, в 16:00
150000 руб./за проект
Разместить шаблон сайта с личным кабинетом под хостинг серверов
28 нояб. 2024, в 00:33
5000 руб./за проект
Нужно записать видео уроки по машинному обучению
28 нояб. 2024, в 00:20
2400 руб./за проект
Ещё заказы