javascript - 当我将元素分配给一个类时，为什么这个 addEventListener 不起作用？

Question

我有两个文本输入和两个日期输入。我创建了一个变量，并使用 QuerySelectorAll 通过一个类选择了它们，并在其上放置了一个点击监听器。监听器上的函数将 div 元素的 textContent 更改为“”或空白。

但是无论如何，我似乎无法让它与 QuerySelectorAll 一起工作。如果我运行此逻辑并选择具有 ID 的输入之一，它会起作用，但如果我尝试创建一个选择所有 4 个输入元素的类，则不起作用。我做错了什么？

    const getSum = () => {
  const inputs = ['dateInput1', 'dateInput2'];
  const outputs = ['result1', 'result2'];

  const arr = inputs.map(input => {
    return document.getElementById(input).value;
  });

  if(arr.every(element => !!element)){
    inputs.forEach((input, index) => {
    const inputValue = document.getElementById(input).value;
    if (inputValue.match(dateRegEx)) {
      var sum = 0;
      for (var i = 0; i < inputValue.length; i++) {
        const num = parseInt(inputValue.charAt(i));
        if (!isNaN(num)) {
          sum += num;
        }
      }
      const total = (sum - 1) % 9 + 1;
      document.getElementById(outputs[index]).textContent = "Your number is: " + total;
    } 
  });
  } else {
 document.getElementById("errorMsg").textContent = "*error* please enter two dates and two names";
   }
}

const sumButton = document.querySelector(".sumNumbers");
sumButton.addEventListener("click", getSum);

const dateRegEx = /^(19|20)\d{2}-(0\d{1}|1[0-2])-([0-2]\d{1}|3[0-1])$/;

function clearErrorMsg(){
  document.getElementById("errorMsg").textContent = "";
} 

const cLickDeletesError = document.querySelectorAll(".clickClear");
Array.from(clickDeletesError).forEach(function(cde){
 cde.addEventListener("click", clearErrorMsg);
}

const dateRegEx = /^(19|20)\d{2}-(0\d{1}|1[0-2])-([0-2]\d{1}|3[0-1])$/;

function clearErrorMsg(){
  document.getElementById("errorMsg").textContent = "";
} 

const cLickDeletesError = document.querySelectorAll(".clickClear");
Array.from(clickDeletesError).forEach(function(cde){
 cde.addEventListener("click", clearErrorMsg);
}

Answer 1

querySelectorAll 返回一个集合，所以你不能直接给它添加事件监听器。所以使用 spread syntax从中获取数组。然后使用forEach进行迭代，添加事件监听

function clearErrorMsg() {
  document.getElementById("errorMsg").textContent = "";
}
[...document.querySelectorAll(".clickClear")].forEach((e) => {
  e.addEventListener("click", clearErrorMsg)
});

<div class="cell-1" id="centerElement">
  <div id="cell-1-nest-l"></div>
  <div id="cell-2-nest-l"></div>
  <div id="cell-3-nest-l"></div>
  <div id="cell-4-nest-l"></div>
  <div id="cell-5-nest-l"></div>
  <div id="cell-6-nest-l">
    <input type="text" class="nameStyle1 clickClear" id="nameInput1" placeholder="Your Name"></div>

</div>

<div id='errorMsg'> Here is Error</div>

另一种选择是使用 querySelector 而不是 querySelectorAll。这是因为该类只有一个相关元素。所以在这种情况下使用 querySelectorAll 是一种开销

function clearErrorMsg() {
  document.getElementById("errorMsg").textContent = "";
}
document.querySelector(".clickClear").addEventListener("click", clearErrorMsg)

<div class="cell-1" id="centerElement">
  <div id="cell-1-nest-l"></div>
  <div id="cell-2-nest-l"></div>
  <div id="cell-3-nest-l"></div>
  <div id="cell-4-nest-l"></div>
  <div id="cell-5-nest-l"></div>
  <div id="cell-6-nest-l">
    <input type="text" class="nameStyle1 clickClear" id="nameInput1" placeholder="Your Name"></div>

</div>

<div id='errorMsg'> Here is Error</div>