无法使用QuerySelector方法添加类

I have an input field inside the form tag in my HTML document which has an id (wow) and has a class detect. I was trying to add a class of (success) which will turn the color of input field green if the input value of user matches the desired pattern. I have selected that input tag through queryselector method like this --> const addclass = document.querySelector('.detect'); but when user I type a value inside the input field I get an error (uncaught type error cannot read property set attribute of null.) The good thing is that it runs fine when I use document.getelement by id method. I don't know why it is showing uncaught type error when I use the query selector method.

这是代码:

const select = document.querySelector('.sinup');

select.addEventListener('keyup', function(element) {
  const value = select.wow.value;
  const pattern = /^[a-z0-9]{6,10}$/;
  const addclass = document.querySelector('.detect');
  if (pattern.test(value)) {
    addclass.setAttribute('class', 'success');
  } else {
    addclass.setAttribute('class', 'error');
  }
})
<form action="" class="sinup">
  <input class="detect" type="text" name="" id="wow" placeholder="username"><br>
  <input class="submit" type="submit">
  <div class=" change"></div>
</form>