Не отображаются картинки при цикле, что делать?

Question

[Artyom Harden]

Задача: отобразить 25 картинок при помощи цикла for, при этом переменная i должна заменять цифры в атрибуте src у ссылки.

Вроде все сделал верно, ошибок нет, но картинки не отображаются.
Вот html (template) код:

<template id="picture-template" style="display: none">
  <a href="">
    <img src="" width="182" height="182" class="pictures">
  </a>
</template>

Вот js код:

var template = document.querySelector('#picture-template');    //нахожу template

  //создаю цикл

  for (var i = 1; i<25; i++ ) {  
   
    var pictures = document.querySelector('.pictures');      //нахожу картинку
    var pictureClone = template.content.cloneNode(true);   //клонирую картинку
    pictures.setAttribute('src', 'photos/' + i + '.jpg');        //задаю url для картинки (не работает)
    pictures.appendChild(pictureClone);                //добавляю в разметку
   
  }

Comments

[Artyom Harden]

Не работает( Так же не отображает

Answer 1

[Антон Швец]

<template id="picture-template" style="display: none">
  <a href="">
    <img src="" width="182" height="182" class="pictures">
  </a>
</template>
<div id="place"></div>

const template = document.querySelector('#picture-template').content;
const place = document.querySelector('#place')
const pictures = template.querySelector('.pictures'); 
for (let i = 1; i<25; i++ ) {  
  const pictureClone = pictures.cloneNode(true);  
  pictureClone.setAttribute('src', 'photos/' + i + '.jpg');
  place.appendChild(pictureClone);
}

Вы хоть в консоль смотрите, прежде чем писать "Вроде все сделал верно, ошибок нет"

Comments

[Artyom Harden]

Теперь работает, спасибо! Можете объяснить что вы сделали? Почему использовали const?

[Антон Швец]

Artyom Harden,
1. Ваш поиск var pictures = document.querySelector('.pictures'); ничего не найдет, потому что искомый элемент находится в темлейте, он скрыт. Кстати, зачем вы его повторяете 25 раз?
Поэтому я сначала клонирую темплейт, склонированная нода сохраняется в переменную template, и там я ищу уже pictures. - template.querySelector('.pictures');
2. Этот pictures клонируется нужное количество раз, изменяется аттрибут и добавляется в div#place, который в отличии от темплейта существует в разметке и видим пользователю.
3. const и let - потому что это нормальный современный javascript, забудьте про var.
4. Если все ок - жмите "отметить как решение"

[Artyom Harden]

Антон, Теперь все понял! Спасибо за решение проблемы)

[Антон Швец]

Artyom Harden, можно обойтись без клонирования темлейта
const template = document.querySelector('#picture-template').content;

[Artyom Harden]

Антон, Хорошо