Нужна помощь по сокращению кода?

Question

[idpgg]

<div class="car-selection" id="wrapper">
        <p class="fleet" id="moon" data-class="moon">луна</p>
        <p class="fleet" id="sun" data-class="sun">Солнце</p>
        <p class="fleet" id="seas" data-class="seas">seas</p>
      </div>

Это кнопки на которые клацаешь и слайдер переключается

let moon = document.querySelector("#moon ")
let sun = document.querySelector("#sun ")
let seas = document.querySelector("#seas")
let offset = 0;

moon.onclick = function  (){
    if (offset === 0 || offset === 2100) {
        offset = 1050
    }  
    sliderLine.style.left = -offset + 'px'
  }

  
  sun.onclick = function  (){
   
    if (offset <= 1050 && offset ) {
        offset = 2100
    }  
    sliderLine.style.left = -offset + 'px'
  }
 
  seas.onclick = function (){
   
    if (offset > 0 ) {
        offset = 0
    }  
    sliderLine.style.left = -offset + 'px'
  }

как его можно написать с помощью обработчика событий
или подскажите как сделать это
есть 3 кнопки, при нажатии на каждую должа вызываться функция которая меняет расположения слайдера в нужное мне (пока я учусь нужно разобраться как это работает что бы в будущем было проще)

Comments

[Михаил]

кнопки

p

[idpgg]

Михаил, да они на button)) но по клику должны переключать слайды

Answer 1

[v3shin]

<div class="car-selection" id="wrapper">
    <p class="fleet" data-position="1050">луна</p>
    <p class="fleet" data-position="2100">Солнце</p>
    <p class="fleet" data-position="0">seas</p>
</div>

document.querySelectorAll('.fleet').forEach(fleet => {
    fleet.addEventListener('click', function () {
        sliderLine.style.left = -this.dataset.position + 'px';
    });
});

Comments

[idpgg]

не сработало( даже не переключает слайд. Я тоже думал чеез дата класс сделать. но как реализовать не знаю. отлавливать клик по нужному мне элементу и запускать нужную мне функцию

[v3shin]

idpgg, прошу прощения, мой косяк. Исправил.

[idpgg]

v3shin, снова что-то не пашет (

[idpgg]

v3shin, Хотя нет ссорян вроде работает )))