classList.contains(“active”) 返回 false 或错误。 从不真实

Question

I'm having a strange issue here, I have an app with a div that has a click event attached to all inner elements, and when a div is clicked it adds a class "active" when I log

console.log(element.classList.contains("active")); 

every element that HAS the active class errors and the ones that don't return "false"

EG HTML:

<div class="kick">
  <div class="pads kick-pad p0"></div>
  <div class="pads kick-pad p1 active"></div>
  <div class="pads kick-pad p2"></div>
  <div class="pads kick-pad p3 active"></div>
  <div class="pads kick-pad p4"></div>
  <div class="pads kick-pad p5"></div>
  <div class="pads kick-pad p6"></div>
  <div class="pads kick-pad p7"></div>
</div>

Edit: the error: "Uncaught TypeError: element.classList.contains is not a function" 2nd Edit: I should add that

console.log(element.classList); 

returns a single element with all the classes on it, including active. it only errors with the ".contains" method

3rd Edit: https://codepen.io/ruination/pen/qBZyVpQ

to clarify:

1. the elements are the correct elements and have the correct class but it doesn't return true OR false, only the error: "Uncaught TypeError: element.classList.contains is not a function"

2. it DOES return false when the elements don't have the class "active" though.

Answer 1

Judging by your code and that the unknown part is how you select the element, I assume that's where the problem is.

For example, on this page, if you open the console and select the question element and check if it has a class as such:

document.querySelector('#question-header').classList.contains('grid');

It will return true

And if you do:

document.querySelector('#question-header').classList.contains('gri');

It will return false

As simple as that. Make sure before you check for a class, see if the element variable does have the correct element you want. Debugging before that point might also help.