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

Question

[Alex Ozerov]

Здравствуйте, накатал простой код на js для слайдера. Меня сильно смущает многоразовое использование обработчика "oncklick". Так как я сильно начинающий разработчик на js, прошу опытных товарищей немного раскритиковать мой код, указать на неточности или недочеты. В идеале хотелось бы увидеть как можно мой код переписать на что то более валидное.
П.Сы. интересует только js.

https://jsfiddle.net/ozerovwebmaster496/7yh2ntec/1/

Comments

[Kovalsky]

100%ный хардкод, какая критика тут может быть) Берёте любой слайдер, пихаете в него ваши данные и весь ваш код в один момент становится не нужен, вот и вся критика.

Как переписать - так чтобы объем кода не увеличивался при увеличении количества элементов. Представьте, что у вас 2174898724 элементов в слайдере

[Евгений]

А если у вас 40 слайдов будет? Будете 40 копипастов кода делать?
Для начала найти все кнопки для слайдов через цикл и привяжите к ним события.

Answer 1

[Дмитрий]

Вот так его можно переписать

// Просто храним все значения left в массиве
const switchActiveStyles = [
  [0, 1000, 2000, 3000, 4000],
  [-1000, 0, 1000, 2000, 3000],
  // и т.д.
]

const activeSwitcherClassName = 'active-switcher'

function activeSwitcherFinder() {
  // Перебор не нужен, активный максимум один
  const active = arr_btn.find(({ classList }) => classList.contains(activeSwitcherClassName)) 
  if (active) active.remove(activeSwitcherClassName)
}

// Найти все можем в цикле
const arr_btn = Array.from([,,,,,], (_, ind) => document.querySelector('.mod-' + ind))
const arr_wraps = Array.from([,,,,,], (_, ind) => document.querySelector('.display-wrap_' + ind))

arr_btn.forEach((btn, ind) => {
  btn.onclick = () => {
    activeSwitcherFinder()
    btn.classList.add('active-switcher')

    // Получаем соответствующий набор значений для left И устанавливаем в цикле
    switchActiveStyles[ind].forEach((style, ind) => {
      arr_wraps[ind].style.left = style + 'px'
    })
  }
})

Answer 2

[Денис Инешин]

Первое что вам нужно изучить сейчас - циклы.
Программист всегда имеет дело с неизвестным количеством элементов.

Comments

[Alex Ozerov]

моя ошибка, я не написал, что я делал слайдер заведомо для 5 слайдов. Я думал над тем что слайдер может быть для n количества слайдов.

[Денис Инешин]

ozerovlife, это не важно, если слайдов больше 1 - уже нужно делать циклом.