无法使用 QuerySelector 方法添加类答案

【问题标题】：Unable to add class using QuerySelector method无法使用 QuerySelector 方法添加类
【发布时间】：2020-05-22 20:26:41
【问题描述】：

我的 HTML 文档的表单标签内有一个输入字段，它有一个 id (wow) 并有一个类检测。我试图添加一个（成功）类，如果用户的输入值与所需的模式匹配，它将把输入字段的颜色变成绿色。我已经通过 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>

【问题讨论】：

哈，因为你换了班上的人。您正在从类中删除 detect 值。第一次运行后找不到

标签： javascript html css dom-events

【解决方案1】：

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

所以你的最终代码应该是这样的：

在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>

使用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>

【讨论】：

【解决方案2】：

您正在更改元素的类。所以在你把类改成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 属性，因为不同目的有多个类是很常见的。

【讨论】：

【解决方案3】：

第一次运行它，它就可以工作。它将类设置为您指定的值。但是在这个过程中，你最终会替换所有现有的类值，你依赖这些值在下一个 keyup 事件触发器上重新识别它。因为它找不到这样的元素——你得到null。

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

【讨论】：