Изменить название и путь картинки заданные в HTML через JS

Question

В JS Задан массив

const initialCards = [
    {
        name: 'Архыз',
        link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg'
    },

В HTML уже есть своя картинка со своим названием

<section class="elements">
            <div class="elements__element">
                <img src="./img/Karachaevsk.jpg" alt="Карачаевск" class="elements__photo">
                <div class="elements__group">
                    <h2 class="elements__title">Карачаевск</h2>
                    <button type="button" class="elements__like"></button>
                </div>
            </div> ```

Нужно сделать так что при загрузке страницы картинка и название html менялись на JS. Логику вижу такую как:

Запросить и сделать запрошенные атрибуты src и elements__title массивом например: Array.from(element.getAttribute('src') и присвоить ему значение link
Запросить elements__title и заменить текст на значение из массива name.
И выполнить функцию присваивания атрибуту src и name новый путь из другого массива.

И таких 6 карточек (6 картинок и 6 названий).

И вот вроде с логикой более все понять запросить из html картинку и название сделать массивом, и и заменить элементы массива из html на js, но как реализовать уже не знаю что смотреть два дня сижу пробую разными способами например через InnerHtml но тоже не получается, одно из условия нельзя добавлять изменения в css.

Answer 1

Проблема именно с выводом массива в HTML? Если да, то метод array.map() может помочь. Если уже есть массив объектов с полями title и link, то можно сделать так, присвоить блоку с классом "elements__element" какой-нибудь id, например "elementDiv" и потом обратиться к нему в методе мар():

const initialCards = [
    {
        name: 'Архыз',
        link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg'
    }, ];


elementDiv.innerHTML = initialCards.map(item => `
   <img src="${item.link}" alt="${item.name}" class="elements__photo">
   <div class="elements__group">
      <h2 class="elements__title">${item.name}</h2>
      <button type="button" class="elements__like"></button>
   </div>`).join("");

БЛОГ НА HUSL

Изменить название и путь картинки заданные в HTML через JS

Ответы (1 шт):