Why do I keep getting this error when I press a button?

Uncaught TypeError: Cannot read property 'toggle' of undefined

Here's the code:

HTML

<button onclick="toggleSidebar()"> </button>

JavaScript:

function toggleSidebar() {
 document.getElementsByClassName("sidebar").classList.toggle("active");
}

The button seems to be working fine when I console.log to check if it's being pressed. But, when I run the above code I keep getting that error. Help would be greatly appreciated!

.getElementsByClassName() returns a collection of matching elements. So, first you must have some elements that have the class specified.

Next, collections don't have a classList property. You must isolate an individual element to use classList, which you can do by passing an index to the returned collection:

button onclick="toggleSidebar()"> </button>

function toggleSidebar() {
 document.getElementsByClassName("sidebar")[0].classList.toggle("active");
}

With that said, you should not be using .getElementsByClassName() in the first place. Instead, use its modern counterpart, .querySelectorAll(). Additionally, you should not be setting up your events with inline HTML event attributes, like onclick. Events should be set up in JavaScript.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Get reference to the buttons and set up click event handlers
document.getElementById("side1Toggle").addEventListener("click", toggleSidebar1);
document.getElementById("side2Toggle").addEventListener("click", toggleSidebar2);

function toggleSidebar1() {
  // If there is a specific single element you want to work with use .querySelector():
  document.querySelector(".sidebar1").classList.toggle("active");
}

function toggleSidebar2() {
  // If you want to work with all the matches use .querySelectorAll():
  document.querySelectorAll(".sidebar2").forEach(function(sidebar){
    sidebar.classList.toggle("active");
  });
}

<!-- language: lang-css -->

.active { color:red; }

<!-- language: lang-html -->

<button id="side1Toggle">Click to toggle sidebar 1 Class</button>
<div class="sidebar1">This is sidebar1.</div>

<button id="side2Toggle">Click to toggle sidebar 2 Class</button>
<div class="sidebar2">This is sidebar2.</div>
<div class="sidebar2">This is sidebar2.</div>
<div class="sidebar2">This is sidebar2.</div>
<div class="sidebar2">This is sidebar2.</div>

<!-- end snippet -->