开发者问题收集

无法使用 QuerySelector 方法添加类

2020-05-22
3517
javascript html css dom-events

我的 HTML 文档中的表单标记内有一个输入字段，它有一个 id（哇）和一个检测类。我试图添加一个类（成功），如果用户的输入值与所需模式匹配，它将把输入字段的颜色变成绿色。我已通过 queryselector 方法选择了该输入标签，如下所示 --> const addclass = document.querySelector('.detect'); 但是当用户在输入字段内输入一个值时，我收到一个错误（未捕获的类型错误无法读取属性集属性为 null。）好消息是，当我通过 id 方法使用 document.getelement 时，它运行良好。我不知道为什么当我使用查询选择器方法时会显示未捕获的类型错误。

这是代码： 

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>
3个回答

问题在于 您尝试在每个 keyup 事件中获取 detect 类，但您在第一个 keyup 中替换了 detect ，因此为了避免这种情况，您应该在 addEventListener 之前定义 addclass 变量，或者使用 classList 将新类添加到每个 keyup 事件中的现有类中。

因此，您的最终代码应该是这样的：

  1. 在 addEventLisetner 之外定义 addClass 。 
const select = document.querySelector('.sinup');
const addclass = document.querySelector('.detect');

select.addEventListener('keyup', function(element) {
  const value = select.wow.value;
  const pattern = /^[a-z0-9]{6,10}$/;
  console.log(addclass);
  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>
  1. 使用 ClassList 。 
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');
  console.log(addclass);
  if (pattern.test(value)) {
    addclass.classList.add("success");
    addclass.classList.remove("error");
  } else {
    addclass.classList.remove("success");
    addclass.classList.add("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>
SMAKSS
2020-05-22

您正在更改元素的类。因此，将类更改为 success 或 error 后， document.querySelector(".detect") 不再能找到它。

您不必完全替换类，而只需添加和删除 success 和 error 类即可。 

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.classList.add("success");
    addclass.classList.remove("error");
  } else {
    addclass.classList.remove("success");
    addclass.classList.add("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>

通常，您应避免直接分配给 class 属性，因为通常有多个类用于不同的目的。

Barmar
2020-05-22

第一次运行它时，它会正常工作。它会将类设置为您指定的值。但在此过程中，您最终会替换所有现有的类值，而您依赖这些值在下一次 keyup 事件触发时重新识别它。由于找不到这样的元素，因此您将得到 null 。

查看使用 add 和 remove 删除单个类，而不是替换整个类列表：

Chase
2020-05-22