My brain is melting for Why I can't select multiple elements with the same class (querySelector, querySelectorAll, getElementsByClassName, etc) and use classList to check if just one div contains a class.

I've seen tutorials written where it exactly uses getElementsbyClassName as examples, like they work. In my case, on Firefox, it's Uncaught TypeError: document.getElementsByClassName(...).classList is undefined

I'm giving these divs a css class ontoggle -

<div class="dot-container">
   <div class="dot-button" id="1" onclick="activateDot(this.id)"></div>
   <div class="dot-button" id="2" onclick="activateDot(this.id)"></div>
   <div class="dot-button" id="3" onclick="activateDot(this.id)"></div>
   <div class="dot-button" id="4" onclick="activateDot(this.id)"></div>
</div>


function activateDot(id) {
     if(document.getElementsByClassName('dot-button').classList.contains('db-active')) {
        console.log('bruh');
     } else {
        console.log('bruw');
     }
     document.getElementById(id).classList.toggle('db-active');
}

What worked was going -

function activateDot(id) {
   document.getElementById(1).classList.remove('db-active');
   document.getElementById(2).classList.remove('db-active');
   document.getElementById(3).classList.remove('db-active');
   document.getElementById(4).classList.remove('db-active');
   document.getElementById(id).classList.toggle('db-active');
}

Brrrr