можно, например, кнопки не писать в разметке, а создавать программно. Для кнопки нужны только название и имя картинки, а в остальном они одинаковы. Ну ещё активная кнопка получает 2 доп. CSS класса.
Для отрисовки достаточно объекта типа
spoilerconst categories = {
mass: 'Масса',
distance: 'Расстояние',
temperature: 'Температура',
time: 'Время',
speed: 'Скорость',
currency: 'Валюта',
};
Там же, где создаются кнопки и вешается на них слушатель клика, можно их складывать в массив. И вот у вас массив элементов. Ещё каждой категории понадобятся данные с единицами измерения. Поэтому центральный объект данных можно примерно так представить:
spoilerconst categories = {
mass: { title: 'Масса', element: null, data: null, },
distance: { title: 'Расстояние', element: null, data: null, },
temperature: { title: 'Температура', element: null, data: null, },
time: { title: 'Время', element: null, data: null, },
speed: { title: 'Скорость', element: null, data: null, },
currency: { title: 'Валюта', element: null, data: null, },
};
В поле element пойдёт созданный HTML-элемент кнопки, а в поле data – что там сейчас в переменной
mass у вас.
Клик по объекту вешать сразу с этим же текущим объектом всех-данных:
Object.entries(categories).forEach(([ name, item ]) => {
const el = document.createElement('div'); // это внешний div кнопки
// el.classList.add(...)
el.insertAdjacentHTML('beforeend', `
<p class="value-item__title">${item.title}</p>
<img src="assets/img/values/${name}.svg" alt="" class="svg-icon value-item__img">
`);
el.addEventListener('click', () => clickHandler(name));
// по этому name можно вытащить categories[name]
divValues.appendChild(el);
});
