0
https://codepen.io/camobap6/pen/oNbOgWv

Нужно что бы при добавлении картинки она загружалась (не на сервер). Не могу понять чего не хватает , вроде всё что нужно указал

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');

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 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);

}


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



const addSubmitHandler = (e) => {
    e.preventDefault();

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

    addPhotoElement(newPhotoElementName, newPhotoElementLink);
    toggleAddPopup();
}
.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: red solid 1px;
    padding: 0;
    position: absolute;
    cursor: pointer;
    background-color:red;
    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: relative;
    top: 0;
    right: 0;
    background-color: red;
}
.elements {
    max-width: 882px;
    margin: 76px auto 0;
    padding: 0;
}
.element-grid__element {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-radius: 10px;
    overflow: hidden;
    max-width: 282px;
}
.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;
}

.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;
}
  .profile__add-button{
   width:60px;
    height:60px;
    background-color:red;
  }
<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">
           
                <img class="element-grid__photo" id="image" alt="" />
            </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>
        </main>

1 ответ 1

0

Добавил событие DOMContentLoaded, потом добавил обработчик для кнопки .popup-add__save-button - его просто не было. Если вы получаете элемент методом getElementById то не нужно указывать #name, т.к. метод работает только с ID, то нужно указать только его значение - name.

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 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);

}


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();
}


})
.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: red solid 1px;
  padding: 0;
  position: absolute;
  cursor: pointer;
  background-color:red;
  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: relative;
  top: 0;
  right: 0;
  background-color: red;
}
.elements {
  max-width: 882px;
  margin: 76px auto 0;
  padding: 0;
}
.element-grid__element {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-radius: 10px;
  overflow: hidden;
  max-width: 282px;
}
.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;
}

.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;
}
.profile__add-button{
 width:60px;
  height:60px;
  background-color:red;
}
  <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">

      <img class="element-grid__photo" id="image" alt="" />
      </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>
  </main>

1
  • спасибо, сам не догадался как то
    – user389240
    25 июл 2020 в 14:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки