Как изменить цвет при клике? а потом убрать?

Question

[idpgg]

<p class="car-fleet car-gazel-mobil" id="positionSlide" data-position="0" data-color="red">1</p>
  <p class="car-fleet" id="positionSlide" data-position="1060" data-color="blue" >2</p>
  <p class="car-fleet" id="positionSlide" data-position="2120" data-color="black">3</p>

document.querySelectorAll("#positionSlide").forEach((positionSlide) => {
  positionSlide.addEventListener("click", function () {
    sliderWidth.style.left = -this.dataset.position + "px"
      this.classList.add ('color') 

  });
});

есть код, он меняет позицию на нужное мне количество пикселей.
мне нужно что бы еще при клике на мои кнопки, кроме позиции менял еще и borderColor выбранной кнопки,а при клике на другую кнопку менял у нее borderColor, а у прошлой убирал borderColor

Comments

[Ankhena]

id не могут повторяться в рамках одной страницы.
Переделайте на классы.

менял еще и borderColor выбранной кнопки,а при клике на другую кнопку менял у нее borderColor, а у прошлой убирал borderColor

При клике у всех элементов убираете класс, в котором прописан border (и что еще захочется), а нужному добавляете.
Всё.

Answer 1

[ThunderCat]

querySelectorAll("#positionSlide") вроде как не совсем корректный запрос, так как ид должен быть уникальным на странице.
В остальном - в функцию добавьте еще смену цвета бордера, сначала у всех в нон, а затем у текущей на нужный бордер.