Почему не работает скрипт?

Question

[artuh_a]

Всем привет!

Хочу сделать переключатель таблиц по нажатию на ссылки в псевдоменю:

<ul id="pseudo-menu">
                <li class="active"><a href="#">Starters</a></li>
                 <li><a href="#">Main dishes</a></li>
            <li><a href="#">Deserts</a></li>
            <li><a href="#">Drinks</a></li>
          </ul>
          <div class="menu-category starters active">
            <div class="menu-page">
              <table>
                   <tr>
                         <td>1</td>
                   </tr>
                </table>
            </div>
          </div>
          <div class="menu-category main-dishes">
            <div class="menu-page">
              <table>
                   <tr>
                         <td>2</td>
                   </tr>
                </table>
            </div>
          </div>
          <div class="menu-category deserts">        
             <div class="menu-page">
                 <table>
                   <tr>
                         <td>1</td>
                   </tr>
          </table>
        </div>
      </div>
          <div class="menu-category drinks">
            <div class="menu-page">
              <table>
                   <tr>
                         <td>1</td>
                   </tr>
             </table>
          </div>
      </div>

function selectMenuPage() {
  var link = document.getElementById( 'pseudo-menu' );
  var table = document.getElementsByClassName( 'menu-category' );
  var index;

  for (index = link.length - 1; index >= 0; --index) {
    this.children.firstChild.addEventListener( 'click' , function changeMenuPage() {
      let removeClassLink = link.querySelector( '.active' ).classList.remove( 'active' );
      let removeClassTable = table.querySelector( '.active' ).classList.remove( 'active' );

      changeMenuPage.preventDefault();
      this.classList.add('active');
      table[index].classList.add('active');
    });
  };
};

selectMenuPage();

Ошибок в консоли нет, в js пока только учусь, подскажите, что не так.

Answer 1

[La1serg]

1. Вы не показали, как вы подключили js к вашей страницы. Может у вас ошибка в подключении?
2. Ваш цикл for не запускается, потому что у link нет свойства length - https://developer.mozilla.org/ru/docs/Web/API/Element
3. Зачем вы объявляете index вне цикла?
4. Почитайте про разницу пост-декремента и префикс-декремента
5. Почитайте, что такое this
6. Используйте свежие учебники по js

Comments

[Bhudh]

3. Зачем вы объявляете index вне цикла?

Экономия на операторе var и вынос переменной в начало кода, куда она так и так хойстится.
До появления let с блочной областью видимости это стандарт.

[artuh_a]

Все таки победил :)

function selectMenuPage() {
  var link = document.getElementById( 'pseudo-menu' ).children;
  var table = document.getElementsByClassName( 'menu-category' );
  var arrayLinks = [];

  for (var i = 0; i < link.length; i++) {
    //Добавляем псевдоссылки в массив
    let arrValue = link[i].firstChild.innerHTML;
    arrayLinks.push(arrValue);

    link[i].firstChild.onclick = function changeMenuPage() {
      let a = this.innerHTML.toString();
      let index = arrayLinks.indexOf(a);


      document.querySelector( '#pseudo-menu .active' ).classList.remove( 'active' );
      document.querySelector( '.menu-category.active' ).classList.remove( 'active' );

      this.parentNode.classList.add('active');
      table[index].classList.add('active');

      return false;
    };
  };
};

selectMenuPage();