Почему не присваивается класс?

Question

[TchernyavskyDaniil]

Добрый день, джс-ом занимаюсь совсем недолго и возник вопрос.

Проблема заключается в присваивании активного состояния кнопкам(dots) для слайдера.

То есть, при нажатии на кнопку, на нее вешается класс (slider__button--active), но почему - то он постоянно вешается на заданную кнопку изначально, на центральную. Как бы перезаписывает себя.

Сам код

Батоны будут отображаться на мобильной ширине, то есть на 320, к примеру.

var tabletIndex = 2;
showTablet(tabletIndex);

function tabletSlide(x) {
  showTablet(tabletIndex = x);
}

function showTablet(x) {
  var i;
  var slidesTablet = document.getElementsByClassName("table__list-main");
  var dotsTablet = document.getElementsByClassName("slider__button-p");


  if (tabletIndex == 1) {
    dotsTablet[slideIndex].className+= "slider__button--active";

    for (i = 0; i < slidesTablet.length; i++) {
      slidesTablet[i].className += " table__list-left";
      slidesTablet[i].className = slidesTablet[i].className.replace(" table__list-right", "");
    }
  }

  if (tabletIndex == 2) {
    dotsTablet[slideIndex].className+= "slider__button--active";

    for (i = 0; i < slidesTablet.length; i++) {
      slidesTablet[i].className = slidesTablet[i].className.replace(" table__list-left", "");
      slidesTablet[i].className = slidesTablet[i].className.replace(" table__list-right", "");
    }
  }

  if (tabletIndex == 3) {
    dotsTablet[slideIndex].className+= "slider__button--active";

    for (i = 0; i < slidesTablet.length; i++) {
      slidesTablet[i].className += " table__list-right";
      slidesTablet[i].className = slidesTablet[i].className.replace(" table__list-left", "");
    }
  }

  for (i = 0; i < dotsTablet.length; i++) {
    dotsTablet[i].className = dotsTablet[i].className.replace("slider__button--active", "");
  }

}

<div class="prices__table table">
              <div class="table__wrapper">
                <ul class="table__list list table__list-tablet">
                  <li class="table__item table__item-head item">
                    <p class="item__price">
                    </p>
                    <p class="item__cost">
                    </p>
                  </li>
                  <li class="table__item item">
                    <p class="item__desc-table">
                      Розовый фильтр
                    </p>
                  </li>
                  <li class="table__item item">
                    <p class="item__desc-table">
                      Смайлики
                    </p>
                  </li>
                  <li class="table__item item">
                    <p class="item__desc-table">
                      Комментарии
                    </p>
                  </li>
                </ul>
                <div class="table__list-wrapper">
                  <ul class="table__list table__list-main list">
                    <li class="table__item item">
                      <p class="item__price">
                        База
                      </p>
                      <p class="item__cost">
                        1,99 USD
                      </p>
                    </li>
                    <li class="table__item item">
                      <p class="item__desc">
                        Розовый фильтр
                      </p>
                      <svg class="item__svg item__svg--yes" width="21.698px" height="16.09px">
                        <use xlink:href="../../img/sprite/sprite-symbols.svg#icon-yes"></use>
                      </svg>
                    </li>
                    <li class="table__item item">
                      <p class="item__desc">
                        Смайлики
                      </p>
                      <svg class="item__svg item__svg--no"  width="26.752px" height="26.752px">
                        <use xlink:href="../../img/sprite/sprite-symbols.svg#icon-no"></use>
                      </svg>
                    </li>
                    <li class="table__item item">
                      <p class="item__desc">
                        Комментарии
                      </p>
                      <svg class="item__svg item__svg--no"  width="26.752px" height="26.752px">
                        <use xlink:href="../../img/sprite/sprite-symbols.svg#icon-no"></use>
                      </svg>
                    </li>
                  </ul>
                  <ul class="table__list table__list-main list">
                    <li class="table__item table__item--active item">
                      <p class="item__price">
                        Стандарт
                      </p>
                      <p class="item__cost">
                        3,99&nbsp;USD
                      </p>
                      <svg class="item__svg-main" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="74px" height="73px" viewBox="0 0 74 73" enable-background="new 0 0 74 73" xml:space="preserve">
                        <polygon points="31,0 0,30.581 0,73 74,0 "/>
                      </svg>
                    </li>
                    <li class="table__item item">
                      <p class="item__desc">
                        Розовый фильтр
                      </p>
                      <svg class="item__svg item__svg--yes" width="21.698px" height="16.09px">
                        <use xlink:href="../../img/sprite/sprite-symbols.svg#icon-yes"></use>
                      </svg>
                    </li>
                    <li class="table__item item">
                      <p class="item__desc">
                        Смайлики
                      </p>
                      <svg class="item__svg item__svg--yes" width="21.698px" height="16.09px">
                        <use xlink:href="../../img/sprite/sprite-symbols.svg#icon-yes"></use>
                      </svg>
                    </li>
                    <li class="table__item item">
                      <p class="item__desc">
                        Комментарии
                      </p>
                      <svg class="item__svg item__svg--no"  width="26.752px" height="26.752px">
                        <use xlink:href="../../img/sprite/sprite-symbols.svg#icon-no"></use>
                      </svg>
                    </li>
                  </ul>
                  <ul class="table__list table__list-main list">
                  <li class="table__item item">
                    <p class="item__price">
                      Анлим
                    </p>
                    <p class="item__cost">
                      9,99 USD
                    </p>
                  </li>
                  <li class="table__item item">
                    <p class="item__desc">
                      Розовый фильтр
                    </p>
                    <svg class="item__svg item__svg--yes" width="21.698px" height="16.09px">
                      <use xlink:href="../../img/sprite/sprite-symbols.svg#icon-yes"></use>
                    </svg>
                  </li>
                  <li class="table__item item">
                    <p class="item__desc">
                      Смайлики
                    </p>
                    <svg class="item__svg item__svg--yes" width="21.698px" height="16.09px">
                      <use xlink:href="../../img/sprite/sprite-symbols.svg#icon-yes"></use>
                    </svg>
                  </li>
                  <li class="table__item item">
                    <p class="item__desc">
                      Комментарии
                    </p>
                    <svg class="item__svg item__svg--yes" width="21.698px" height="16.09px">
                      <use xlink:href="../../img/sprite/sprite-symbols.svg#icon-yes"></use>
                    </svg>
                  </li>
                </ul>
                </div>
              </div>
              <div class="items__slider slider">
                <span class="slider__button slider__button-p" onclick="tabletSlide(1)">1</span>
                <span class="slider__button slider__button-p slider__button--active" onclick="tabletSlide(2)">2</span>
                <span class="slider__button slider__button-p" onclick="tabletSlide(3)">3</span>
              </div>
            </div>

.table__list-left {
  transform: translateX(280px);
}

.table__list-right {
  transform: translateX(-280px);
}

.table__list-center {
  transform: translateX(0);
}

Answer 1

[Negwereth]

Открой для себя classList

Answer 2

[Павел Корнилов]

Вот пример простого кода на эту тему.

<style type="text/css" media="screen">
  #nav > li {cursor: pointer;}
  #nav >.active {border:3px solid red;}
 </style>

 <ol id="nav">
  <li class="active">пункт
  </li><li>пункт
  </li><li>пункт
  </li><li>пункт
  </li><li>пункт
 </li></ol>


 <script type="text/javascript">
 var els= document.getElementById('nav');

 els.onclick= function(e) {
  [].forEach.call(this.querySelectorAll('li'), function(i) {
   i.classList.remove('active');
  })
  e.target.classList.add('active');
  e.stopPropagation();
 }

 </script>
<div>
 <h5>Javascript-код:</h5>
 <div class="code" style="display:block; width:100%; overflow:auto;"><pre><code for="prim" nolib="">