Браузер ругается на эту строку document.querySelector(...) is null

Хотел сделать добавление картинки в избранное с помощью куки, но не вышло, сам редактор кода ничего не выдает, но когда хочу посмотреть как все работает в браузере выскакивает эта ошибка.

   const saveButton = document.querySelector('.save-button');
   const imageSrc = document.querySelector('.image-container img').src;

  saveButton.addEventListener('click', () => {
  let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
if (!favorites.includes(imageSrc)) {
    favorites.push(imageSrc);
    localStorage.setItem('favorites', JSON.stringify(favorites));
    saveButton.textContent = 'Удалить из избранного';
} else {
    favorites = favorites.filter(src => src !== imageSrc);
    localStorage.setItem('favorites', JSON.stringify(favorites));
    saveButton.textContent = 'Сохранить в избранное';
 }
});

 const favoritesContainer = document.querySelector('.favorites-container');

function renderFavorites() {
let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
let html = '';

if (favorites.length === 0) {
    html = '<p>Нет сохраненных избранных изображений</p>';
} else {
    favorites.forEach(src => {
        html += `<div class="favorite-image"><img src="${src}" alt="Изображение"></div>`;
    });
}

favoritesContainer.innerHTML = html;
 }

 renderFavorites();