1

Как сделать так, чтобы название картинки переходило в атрибут описания alt= ?

https://codepen.io/camobap6/pen/YzwMqeE

document.addEventListener('DOMContentLoaded', function() {

    let popupAdd = document.querySelector('.popup-add');
    let popupAddEditForm = document.querySelector('.profile__add-button');
    let popupAddClose = document.querySelector('.popup-add__close');
    let popupLoad = document.querySelector('.popup-add__save-button');

    popupLoad.addEventListener('click', function(e) {
        e.preventDefault()
        addSubmitHandler()
    })

    function toggleAddPopup() {
        popupAdd.classList.toggle('popup-add_active');

    }

    function addForm() {
        toggleAddPopup();
    }


    popupAddEditForm.addEventListener('click', addForm);
    popupAddClose.addEventListener('click', toggleAddPopup);


    const initialCards = [{
            name: 'Архыз',
            link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg'
        },
        {
            name: 'Челябинская область',
            link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/chelyabinsk-oblast.jpg'
        },
        {
            name: 'Иваново',
            link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/ivanovo.jpg'
        },
        {
            name: 'Камчатка',
            link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kamchatka.jpg'
        },
        {
            name: 'Холмогорский район',
            link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kholmogorsky-rayon.jpg'
        },
        {
            name: 'Байкал',
            link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/baikal.jpg'
        }
    ];

    const deleteCard = (e) => {
        e.target.closest('.element-grid__element').remove();
    }


    const toggleLikeButton = (e) => {
        e.target.classList.toggle('element-grid__like-button_active');
    }

    const addPhotoElement = (caption, imageLink) => {
        const elementTemplate = document.querySelector('#photo-elements-template').content;
        const photoElement = elementTemplate.cloneNode(true);
        photoElement.querySelector('.element-grid__photo').src = imageLink;
        photoElement.querySelector('.element-grid__text').textContent = caption;
        const photoElementsList = document.querySelector('.element-grid');

        photoElementsList.prepend(photoElement);

        document.querySelector('.element-grid__like-button').addEventListener('click', toggleLikeButton);
        document.querySelector('.element-grid__delite-button').addEventListener('click', deleteCard)

    }


    const addCards = (array) => {
        array.forEach((item) => {
            addPhotoElement(item.name, item.link);
        })
    }
    addCards(initialCards);



    const addSubmitHandler = (e) => {

        const newPhotoElementName = document.getElementById('name').value;
        const newPhotoElementLink = document.getElementById('link').value;

        addPhotoElement(newPhotoElementName, newPhotoElementLink);

        toggleAddPopup();
    }


})
.profile__add-button {
  display: none;
}

.element-grid__delite-button {
  float: right;
  width: 20px;
  height: 20px;
  background-color: red;
}

.element-grid__element {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-radius: 10px;
  overflow: hidden;
  max-width: 282px;
  position: relative;
}

.element-grid__like-button {
  background-image: url(../../../images/like-pic.svg);
  padding: 0;
  margin-top: 6px;
  width: 21px;
  height: 20px;
  background-color: white;
  outline: none;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  z-index: 2;
}

.element-grid__like-button:hover {
  opacity: 0.8;
  transition: all 1s ease-in;
}

.element-grid__photo {
  width: 282px;
  height: 282px;
  margin: 0;
  padding: 0;
}

.element-grid__text {
  font-family: 'Inter', ‘Arial’, sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  line-height: 29px;
  color: black;
  padding: 0;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 88%;
}

.element-grid__text-container {
  margin: 0;
  background: #FFFFFF;
  display: flex;
  justify-content: space-between;
  padding: 25px 19px 31px;
  align-items: center;
}

.element-grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 20px 18px;
  grid-template-columns: repeat(auto-fit, 282px);
  justify-content: center;
}

.popup-add {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.popup-add__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  max-width: 430px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-add__close {
  border: none;
  padding: 0;
  position: absolute;
  cursor: pointer;
  background: url(../images/сlose-icon.svg) no-repeat center;
  width: 40.7px;
  height: 40.7px;
  right: -40.7px;
  top: -40.7px;
}

.popup-add__close:hover {
  opacity: 0.6;
  transition: all .1s ease-in;
}

.popup-add__title {
  font-weight: 900;
  font-family: 'Inter', ‘Arial’, sans-serif;
  font-size: 24px;
  line-height: 29px;
  color: black;
  width: 358px;
  margin: auto;
  padding-top: 34px;
}

@media screen and (max-width: 550px) {
  .popup-add__title {
    max-width: 230px;
    font-size: 16px;
    line-height: 20px;
  }
}

.popup-add__input {
  border: none;
  margin: 29.74px auto 0;
  padding-bottom: 13.3px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  width: 358px;
  font-size: 14px;
  line-height: 17px;
  outline: none;
  color: #C4C4C4;
}

.popup-add__input:nth-of-type(1) {
  margin-top: 54px;
}

.popup-add__input:active {
  outline: 2px solid blue
}

@media screen and (max-width:750px) {
  .popup-add__input {
    width: auto;
  }
}

.popup-add__save-button {
  font-family: 'Inter', ‘Arial’, sans-serif;
  background: black;
  border: none;
  border-radius: 2px;
  height: 50.15px;
  width: 358px;
  margin: auto;
  color: white;
  margin: 48px auto 36.5px;
  cursor: pointer;
}

.popup-add__save-button:hover {
  background: rgba(0, 0, 0, 0.8);
  transition: all .1s ease-in;
}

@media screen and (max-width: 550px) {
  .popup-add__save-button {
    width: 200px;
    height: 35px;
  }
}

.popup-add_active {
  display: block;
}

.element-grid__like-button_active {
  background-image: url(../images/likepic.PNG);
}

.element-grid__delite-button {
  width: 20px;
  height: 20px;
  z-index: 4;
  position:absolute;
  top: 10px;
  right: 10px;
  background-color: red;
}

.elements {
  max-width: 882px;
  margin: 76px auto 0;
  padding: 0;
}
<button class="profile__add-button" type="button"></button>
<section class="popup-add">
                <form class="popup-add__container" name="popup-add__container">
                    <button type="button" class="popup-add__close"></button>
                    <h2 class="popup__title">Новое Место</h2>
                    <input type="text" class="popup-add__input" placeholder="Название" id="name" />
                    <input type="text" class="popup-add__input" placeholder="Ссылка на картинку" id="link" />
                    <button type="submit" class="popup-add__save-button">Загрузить</button>
                </form>

            </section>
<section class="elements" aria-label="галерея">

                <ul class="element-grid">



                </ul>
            </section>

            <template id="photo-elements-template">
            <li class="element-grid__element">
            
                    <div class="123a">
                      <button class="element-grid__delite-button" type="button">
                    <img class="element-grid__photo" id="image" alt="" />
                </div>
                </div>
            

                <div class="element-grid__text-container">
                    <p class="element-grid__text"></p>

                    <button class="element-grid__like-button" type="button"></button>
                   

                </div>
            </li>
            </template>

1 ответ 1

2

Помечено *

const addPhotoElement = (caption, imageLink) => {
  const elementTemplate = document.querySelector('#photo-elements-template').content;
  const photoElement = elementTemplate.cloneNode(true);
  photoElement.querySelector('.element-grid__photo').src = imageLink;
  photoElement.querySelector('.element-grid__photo').setAttribute('alt', caption); // *
  photoElement.querySelector('.element-grid__text').textContent = caption;
  const photoElementsList = document.querySelector('.element-grid');

  photoElementsList.prepend(photoElement);

  document.querySelector('.element-grid__like-button').addEventListener('click', toggleLikeButton);
  document.querySelector('.element-grid__delite-button').addEventListener('click', deleteCard)

}

3
  • Благодарю, заработало
    – user389240
    28 июл 2020 в 21:24
  • Буду не против галочки)
    – kertAW
    28 июл 2020 в 21:27
  • Поставил , просто время не давало разрешения поставить сразу
    – user389240
    28 июл 2020 в 21:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.