Why is it that I can't seem to select multiple elements with the same class (using querySelector, querySelectorAll, getElementsByClassName, etc) and use classList to check if just one div contains a specific class?
I've come across tutorials that show examples using getElementsByClassName as if they work flawlessly. However, in my case, when I try it on Firefox, I get an error:
Uncaught TypeError: document.getElementsByClassName(...).classList is undefinedI am assigning a CSS class of 'ontoggle' to these divs -
<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');
}
The workaround for me was to do the following -
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