Я пишу веб-приложение, которое позволяет пользователю редактировать различные дизайны объектов на странице html. Я хотел бы добавить кнопку отмены, которая возвращает исходное форматирование объекта html.
Я думал сделать это:
const lastChanges = [];
const saveLastChanges = (ObjectId)=>{
// get the html element by id.
let theObject = document.getElementById(ObjectId);
// copy the element and add to array.
lastChanges.push(theObject.cloneNode(true));
document.getElementById('undoBtn').style.display = 'block';
};
document.getElementById('undoBtn').addEventListener('click', ()=>{
undo();
})
const undo = ()=>{
const lastChange = lastChanges[lastChanges.length - 1];
let test = document.getElementById(lastChange.id);
// Not sure what to do in this line:
test.attributes = lastChange.attributes
lastChanges.pop();
if(!lastChanges){
document.getElementById('undoBtn').style.display = 'none';
}
}
Сохраняет старое значение в этом стиле:
document.getElementById('finishEditProfilePicture').addEventListener('click', () => {
saveLastChanges('customProfileImage');
const input = document.getElementById('inputProfileImage');
const profileImage = document.getElementById('customProfileImage');
if (input.files.length > 0) { readProfileImage(input) };
profileImage.style.borderColor = document.getElementById('inputProfileImageBorderColor').value;
profileImage.style.borderStyle = document.getElementById('inputProfileImageBorderStyle').value;
profileImage.style.borderWidth = document.getElementById('inputProfileImageBorderWidth').value + "px";
profileImage.style.bottom = document.getElementById('inputProfileImageBottom').value + "px";
profileImage.style.borderRadius = document.getElementById('inputProfileImageBorderRadius').value + "%";
profileImage.style.background = document.getElementById('inputProfileImageBackground').value;
closeAllEditContainer();
})
Мне удается сохранить старое значение, но не могу вернуть старое значение объекту. Идеи как это сделать?