sidebar.getElementsByClassName не является функцией

Question

Я пытаюсь установить «активный» класс для любого элемента «nav-link», который был нажат. Надеюсь, это сохранится на следующей странице, где пользователь перейдет.

Сейчас я вижу sidebar.getElementsByClassName is not a function в консоли. Полагаю, я не могу поместить все элементы одного класса внутрь другого класса?

    <div class="sidebar">
      <div class="logo"><a href="{% url 'main:dashboard_view' %}" class="simple-text logo-normal">
          <img src="{% static 'img/logos/logo-white.png' %}" class="img-fluid">
        </a></div>
      <div class="sidebar-wrapper">
        <ul class="nav">
          <li class="nav-item active  ">
            <a class="nav-link" href="{% url 'main:dashboard_view' %}">
              <i class="material-icons">dashboard</i>
              <p>Dashboard</p>
            </a>
          </li>
          <li class="nav-item ">
            <a class="nav-link" href="{% url 'main:dashboard_profile_view' %}">
              <i class="material-icons">person</i>
              <p>{{user.username}}</p>
            </a>
          </li>

          <li class="nav-item ">
            <a class="nav-link" href="{% url 'main:create_blog_post_view' %}">
              <i class="material-icons">library_books</i>
              <p>Blog</p>
            </a>
          </li>
           ....
        </ul>
      </div>
    </div>

  <script>
// Get the container element
var sidebar = document.getElementsByClassName("sidebar");

// Get all buttons with class="nav-link" inside the container
var navLinks = sidebar.getElementsByClassName("nav-link");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < navLinks.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
} 
  </script>

Answer 1

getElementsByClassName возвращает массив элементов. Это правильный код: var navLinks = sidebar [0] .getElementsByClassName ("nav-link");