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

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

// Получаем элементы по их 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

Я сейчас заметил что на мобильных то не работает. Я нажимаю и все пропало. Начал думаю и попробовал изменить на click на touchstart и что то не чего

Я вот нашел какой решение

// Получаем элемент с классом .pic_card_img
const picCardImg = document.querySelector(".pic_card_img");
// Получаем все элементы с id, начинающимся с 'explanation_card-'
const explanationCards = document.querySelectorAll('[id^="explanation_card-"]');
// Перебираем каждый элемент
explanationCards.forEach((o, i) => {
  // Создаем URL изображения
  // const url = `url(${window.location.origin}/web/rules/picture/thumbnail_card-${i}.png)`;
  const url = `url(../picture/thumbnail_card-${i}.png)`;
  // Добавляем обработчик события наведения на элемент
  o.addEventListener("mouseenter", () => {
    // Устанавливаем фоновое изображение для элемента picCardImg
    picCardImg.style.backgroundImage = url;
  });
  // Добавляем обработчик события ухода с элемента
  o.addEventListener("mouseleave", () => {
    // Возвращаем исходное фоновое изображение, если оно было установлено
    // picCardImg.style.backgroundImage = `url(${window.location.origin}/web/rules/picture/thumbnail_card_front.png)`;
    picCardImg.style.backgroundImage = `url(../picture/thumbnail_card_front.png)`;
  });
  // Обработчик для касания на мобильных устройствах
  o.addEventListener("touchstart", () => {
    // Устанавливаем фоновое изображение для элемента picCardImg
    picCardImg.style.backgroundImage = url;
  });
});

Но проблема в том что У меня либо на локальном не работает либо на хостинге. Идут ошибки что файлы не найдены. То есть работает либо там либо так вот из за этого

// Создаем URL изображения
  // const url = `url(${window.location.origin}/web/rules/picture/thumbnail_card-${i}.png)`;
  const url = `url(../picture/thumbnail_card-${i}.png)`;

И тут так же

// Возвращаем исходное фоновое изображение, если оно было установлено
    // picCardImg.style.backgroundImage = `url(${window.location.origin}/web/rules/picture/thumbnail_card_front.png)`;
    picCardImg.style.backgroundImage = `url(../picture/thumbnail_card_front.png)`;

вот первый url это для хостинга а второй это для локалки.

И работаю одно комментирую в хостинг гружу другое комментарию, это даже на костыль не похоже, а на какую то инвалидную коляску.

Все проблему решил.