I'm quite new to JavaScript, and I'm stuck with an issue which I didn't manage to find an answer for.

I have an array, each item of which is tied to a card in markup. When a button is pressed, a form pops up and allows to enter name and url for the new image, which is then unshifted to thebeginning of the array. The last element of the array is popped, so there's always the same number of elements.

And the issue itself is: When I add a single card, it works perfect: last card is popped and the new one is tucked in the beginning. But when I use and submit the form again, the card that I have previously edited changes as well, although it should not.

I suspect that the mistake lies in the function that updates the cards, but I'm all out of ideas how to fix it. Is there a way to fix that function?

const formAdd = document.querySelector('.popup__form-add')
const newElement = { name: '', link: '' };
const blank = { name: '', link: '' };
const placeName = document.querySelector('.popup__edit_type_place-name');
const placeImage = document.querySelector('.popup__edit_type_place-picture');
const elements = document.querySelector('.elements');
const cards = elements.querySelectorAll('.element');

const buttonAdd = document.querySelector('.profile__button-add');
const buttonAddClose = document.querySelector('.popup__add-button-close');


//content popup functions
function popupAddDisplay() {
    popupAdd.classList.add('popup_opened');
}

function popupAddHide() {
    popupAdd.classList.remove('popup_opened');
}

function contentUpdate() {
    event.preventDefault();
    newElement.name = placeName.value;
    newElement.link = placeImage.value;
    console.log(newElement);
    initialCards.pop();
    initialCards.unshift(blank);
    blank.name = newElement.name;
    blank.link = newElement.link;
    console.log(initialCards);
    cardsCheck();
    popupAddHide();
};

//cards array, page content loads from here
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'
    }
];

//compares info from the markup with the array, then pushes array info into markup
function cardsCheck() {
    cards.forEach(function(item, index) {
        const nameAlt = initialCards[index].name;
        const imageSrcAlt = initialCards[index].link;
        item.querySelector('.element__name').textContent = nameAlt;
        item.querySelector('.element__image').src = imageSrcAlt;
        if (nameAlt == '') {
            item.style.display = 'none'
        }

        console.log(nameAlt);
    });
}
document.onload = cardsCheck();

buttonAdd.addEventListener('click', () => {
    popupAddDisplay()
});
buttonAddClose.addEventListener('click', popupAddHide);
formAdd.addEventListener('submit', contentUpdate);```

CodePudding user response：

You always use the same blank object. So at the end you have the same object multiple times in the array. If you change an attribute of this object it is changed wherever it is in the list also.

To avoid this you need to create a new object before adding it to the array

function contentUpdate() {
    event.preventDefault();
    newElement.name = placeName.value;
    newElement.link = placeImage.value;
    console.log(newElement);
    initialCards.pop();
    let blank = { name: '', link: '' };
    initialCards.unshift(blank);
    blank.name = newElement.name;
    blank.link = newElement.link;
    console.log(initialCards);
    cardsCheck();
    popupAddHide();
};

CodePudding user response：

Every time you create a new card, it seems like you override the global variables blank and newElement.
However, you don't have to. You could create a local variable in your contentUpdate function called newElement.
That way, each time updateContent is called, a new local variable is created.

You could therefore try the following code:

const formAdd = document.querySelector('.popup__form-add')
const placeName = document.querySelector('.popup__edit_type_place-name');
const placeImage = document.querySelector('.popup__edit_type_place-picture');
const elements = document.querySelector('.elements');
const cards = elements.querySelectorAll('.element');

const buttonAdd = document.querySelector('.profile__button-add');
const buttonAddClose = document.querySelector('.popup__add-button-close');

//content popup functions
function popupAddDisplay() {
    popupAdd.classList.add('popup_opened');
}

function popupAddHide() {
    popupAdd.classList.remove('popup_opened');
}
function contentUpdate() {
    event.preventDefault();
    const newElement = {}
    newElement.name = placeName.value;
    newElement.link = placeImage.value;
    console.log(newElement);
    initialCards.pop();
    initialCards.unshift(newElement);
    console.log(initialCards);
    cardsCheck();
    popupAddHide();
}