Как заменить шесть «function» на одну?

Question

[mijanj]

У меня есть 6 однотипных функций, в них отличаются лишь названия, и ID изменяемых объектов.

Как можно вот это все заменить лишь одной функцией? Я пока что не сильно разбираюсь в JavaScript, но вроде как, можно как-то получить предыдущий элемент(хотя у меня он, не совсем предыдущий, вместо поиска элемента по ID.

Буду очень благодарен, за объяснение

Answer 1

[0xD34F]

Вырезать инлайновые обработчики, добавить элементам общий класс, например: class="xxx". Повесить делегированный обработчик, внутри которого проверять наличие этого класса:

document.addEventListener('input', ({ target: t }) => {
  if (t.classList.contains('xxx')) {
    t.previousElementSibling.querySelector('.p_value').innerText = t.value;
  }
});

Comments

[mijanj]

Огромнейшее вам спасибо!

[mijanj]

Только почему-то скрипт, начинает работать, после первого изменения на range, тобишь, первый раз нажимаешь, оно не работает, потом вторые попытки работает.

[0xD34F]

mijanj, всё работает как надо, если сделать как я сказал. Вы не сделали.

[mijanj]

0xD34F, всё, понял, все супер, ещё раз благодарю.

Answer 2

[Сергей Соколов]

Поскольку и разметка повторяется, тут 6 одинаковых по устройству Компонентов.
Предлагаю сделать центром всего — Данные. Где и компоненты описаны и выбранные значения. В данных же хранить ссылки на элементы, в которые отрисовывать изменяющееся значение. И вообще держать текущее «состояние» игры.
Разметку создавать налету из данных в самом начале.