Слишком длинный код
 

Как его можно сократить ?

// Получаем элементы по их ID
const item1 = document.getElementById("item-1");
const item2 = document.getElementById("item-2");
const item3 = document.getElementById("item-3");
const item4 = document.getElementById("item-4");
const item5 = document.getElementById("item-5");
const item6 = document.getElementById("item-6");
const item7 = document.getElementById("item-7");
const item8 = document.getElementById("item-8");
const item9 = document.getElementById("item-9");
const setPic = document.querySelector(".set_pic");



// Добавляем обработчик события наведения на элемент item-1
item1.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-1.png)";
});
// Добавляем обработчик события ухода с элемента item-1
item1.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-1.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-2
item2.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-2.png)";
});
// Добавляем обработчик события ухода с элемента item-2
item2.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-2.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-3
item3.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-3.png)";
});
// Добавляем обработчик события ухода с элемента item-3
item3.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-3.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-4
item4.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-4.png)";
});
// Добавляем обработчик события ухода с элемента item-4
item4.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-4.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-5
item5.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-5.png)";
});
// Добавляем обработчик события ухода с элемента item-5
item5.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-5.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-6
item6.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-6.png)";
});
// Добавляем обработчик события ухода с элемента item-6
item6.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-6.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-7
item7.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-7.png)";
});
// Добавляем обработчик события ухода с элемента item-7
item7.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-7.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-8
item8.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-8.png)";
});
// Добавляем обработчик события ухода с элемента item-8
item8.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-8.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-9
item9.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-0.png)";
});
// Добавляем обработчик события ухода с элемента item-9
item9.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-0.png)") {
    setPic.style.backgroundImage = "";
  }
});

Открой для себя циклы и классы... ;)
Тогда можно будет реализовать нечто такое.

const setPic = document.querySelector(".set_pic")
document.querySelectorAll('.item').forEach((o, i) => {
	const url = `url(../picture/box_game-${i}.png)`
	// Добавляем обработчик события наведения на элемент 
	o.addEventListener("mouseenter", _ => {
	  // Устанавливаем фоновое изображение для элемента setPic
	  setPic.style.backgroundImage = url;
	});
	// Добавляем обработчик события ухода с элемента 
	o.addEventListener("mouseleave", _ => {
	  // Возвращаем исходное фоновое изображение, если оно было установлено
	  if (setPic.style.backgroundImage === url) {
		setPic.style.backgroundImage = "";
	  }
	});
})

Вот такая ошибка

backgroundImage.js:14 Uncaught TypeError: Cannot read properties of null (reading 'forEach')

Значит на момент работы скрипта нужных элементов (с классом item) нет на странице...

ладно попробую разобраться, так как то что написано вроде понятно

Сергей Ракипов, для получения уже готовых на 100% решений - нужно предоставлять полные тестовые примеры, а не только некие части кода.
Показал часть - только часть и получил.
Показал полный пример - полный и получил.

ksa, в вашем коде ошибка: используется метод "querySelector" вместо "querySelectorAll". Конечно же null и интерфейс Element не содержат метода "forEach".

Также из примера автора понятно, что в HTML используются идентификаторы, а не классы. Значит селектор для метода "querySelectorAll" будет следующим: [id^="item-"]

document.querySelectorAll('[id^="item-"]')

Твоя правда... :cray:

Так я его на классы и ориентировал... Иначе от так и будет копипастить с ИДшниками. :)

Спасибо за помощь :dance:

Обращайся... :D